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.

Answer 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);

Answer 2

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/

Answer 3

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+

Answer 4

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.