Passing parameter to javascript onclick without using HTML

Question

I can't figure this out. I'm trying to create an onclick handler purely in Javascript.

What I plan to do here is inside this DIV, have a collection of items that I can click on. For now, these items will be numbers from 0 to 9 inclusive. When a number is clicked on, a system message consisting solely of that number should pop-up on the screen. I narrowed my problem down to just the onclick handler definition.

If I use this format:

    item[n].onclick=function(n){
       handler(n);
    }

The handler will fire only when click a number which is correct, but the message that appears is something about mouse event.

If I use this format:

    item[n].onclick=function(){
       handler(n);
    }

The handler will pass a value of -1 which in turn is printed as a message. I think it means "false".

How do I modify this:

    item[n].onclick=function(){
       handler(n);
    }

so that 'n' being used as the handler parameter is the same as the number I click on the screen?

My code is the following:

<div ID="Itemset"></div>

function handler(n){
    alert(n);
}

collections=document.getElementById('Itemset');
for(n=0;n<10;n++){
    item[n]=document.createElement('DIV');
    item[n].innerHTML=n;
    collections.appendChild(item[n]);
    item[n].onclick=function(n){
       handler(n);
    }
}

What I'm effectively trying to do if you want to understand it HTML wise is this:

<div ID="Itemset">
<div onclick="handler(0);">0</div>
<div onclick="handler(1);">1</div>
<div onclick="handler(2);">2</div>
<div onclick="handler(3);">3</div>
<div onclick="handler(4);">4</div>
<div onclick="handler(5);">5</div>
<div onclick="handler(6);">6</div>
<div onclick="handler(7);">7</div>
<div onclick="handler(8);">8</div>
<div onclick="handler(9);">9</div>
</div>

Except that I don't want to write out onclick="handler(n);" a million times.

Any advice? and feel free to point to another resource that has the answer I need if there is one.

UPDATE

I'm looking for something compatible with older browsers as well. I'm going to have to not go for the bind function because according to mozilla docs, it works for IE 9+. I'm looking for something that works for IE 7+ as well as other browsers. I might have to go for event listeners if there is no other alternative.

you may need to use handler(this.innerHTML); jsfiddle.net/ujzbem71 — bansi
– bansi, Commented Dec 26, 2015 at 6:43

Community · Accepted Answer · 2017-05-23 12:15:47Z

1

You have a closure issue here (see JavaScript closure inside loops – simple practical example), a simple solution is to use bind to use the current value of n to be a parameter of the handler function

item[n].onclick=handler.bind(item[n],n);

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Dec 26, 2015 at 5:57

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Malaiyandi Murugan · Accepted Answer · 2015-12-26 06:11:58Z

0

U can use addEventListener and ID for find clicked element...

 document.getElementById("Itemset").addEventListener("click", function(e) {
        // e.target is the clicked element!
        // If it was a list item
        var value_data = parseInt(e.target.textContent);
        if(e.target && value_data > -1) {
            alert("Malai test:: "+value_data);
                        //handler(value_data);
        }
    });

https://jsfiddle.net/malai/tydfx0az/

edited Dec 26, 2015 at 6:11

answered Dec 26, 2015 at 6:00

Malaiyandi Murugan

3933 silver badges15 bronze badges

Comments

Mike -- No longer here · Accepted Answer · 2015-12-26 06:46:11Z

0

I found my answer here: https://bytes.com/topic/javascript/answers/652914-how-pass-parameter-using-dom-onclick-function-event

Instead of:

item[n].onclick=function(n){
   handler(n);
}

I have to do:

item[n].onclick=new Function('handler('+n+')');

Funny thing is, the word function needs to be capitalized when making a new instance. It's awkward I have to go this route but it works in IE 7+

answered Dec 26, 2015 at 6:46

Mike -- No longer here

2,1021 gold badge25 silver badges39 bronze badges

Comments

Sandeep Sharma · Accepted Answer · 2015-12-26 07:06:30Z

0

One alternative is :

function handler(){
    alert(this.id);
}
function myFunction() {

    var item=[];

    collections=document.getElementById('Itemset');
    for(n=0;n<10;n++){
        item[n]=document.createElement('DIV');
        item[n].innerHTML=n;
        item[n].setAttribute("id","itemset"+n);
        collections.appendChild(item[n]);
        item[n].onclick=handler;
    }
}

Insert dynamic ids to the elements and when you click on any element retrieve its id using this.id and do whatever you want to do with that value.

That's all.

Hope this helps.

edited Dec 26, 2015 at 7:06

answered Dec 26, 2015 at 6:59

Sandeep Sharma

1,8853 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

Passing parameter to javascript onclick without using HTML

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related