Please tell me why this is happening!

Yesterday, 10:57 AM

Please tell me why I am constantly getting "alert(10)". How do I modify this code so the alert is unique to the link. Every child should be unique with a unique onclick function. This isn't so!

<html>
<head>
<script>
function test()
{
for(var a=0;a<10;a++)
{
var elm = document.createElement("a");
elm.innerHTML = " " + a + " ";
elm.onclick = function(){alert(a)};
document.body.appendChild(elm);
}
}
</script>
</head>
<body> </body>
</html>

Yesterday, 11:31 AM

Your code won't work because this line:

Code:

elm.onclick = function(){alert(a)};

Is telling JavaScript to alert the current value of 'a', which ends at 10. I've written some code to achieve what I think you would like. I've made it a little more obvious that the numbers are indeed wrapped in <a> tags, but you can remove that line if you like:

Using PHP highligher, but it's all JS:

PHP Code:


			
<script>
function test()
{
    for(var a = 0; a < 10; a++)
    {
        var elm = document.createElement("a");
        
        elm.id = a;
        elm.href = "javascript: void(0);";
        elm.innerHTML = " " + a + " ";
        
        document.body.appendChild(elm);
        
        document.getElementById(a).addEventListener("click", display_value, false);
    }
}

// Must pass in the event or pedantic Firefox won't like it.
function display_value(event)
{
    // MSIE supports srcElement, not target. Condition for both, browser decides.
    alert((event.srcElement || event.target).innerHTML);
}

</script>

<body></body>

This is a cross-browser solution and works in the top 5 (MSIE, FF, Chrome, Safari, Opera).

Yesterday, 11:33 AM

Thanks for the quick reply. I fiddled with it some more here is what I came up with also.

<html>
<head>
<script>
function test()
{
for(var a=0;a<3;a++)
{
var elm = document.createElement("a");
elm.innerHTML = " " + a + " ";
elm.name = a;
elm.onclick = function(){alert(this.name)};
document.body.appendChild(elm);
}
}
</script>
</head>
<body> </body>
</html>