javascript argument get wrong number

Question

I'm trying to create dynamically a menu in Javascript with a function with one argument in the onclick property using the code bellow:

function createCameraMenu() {
    var nav = document.createElement('nav');
    var ul  = document.createElement('ul');
    ul.className = "menu";

    for (var i = 0; i < cameraID.length; i = i + 1) {
        var liField = document.createElement('li');
        var aField  = document.createElement('a');

        aField.textContent = "CAMERA " + i;

        aField.onclick = function() {
            hideImages(i);
        };

        li.appendChild(aField);
        ul.appendChild(li);
    }

    nav.appendChild(ul);
    document.body.appendChild(nav);
}

and the result should be the code bellow:

<nav>
    <ul class="menu" >
        <li><a href="#" onClick="hideImages(0)">CAMERA 1</a></li>
        <li><a href="#" onClick="hideImages(1)">CAMERA 2</a></li>
        <li><a href="#" onClick="hideImages(2)">CAMERA 3</a></li>                
    </ul>
</nav>

but after creating the menu, for any item clicked, the function hideImages(3) is executed. For some reason, all my functions are created with the same argument (3), that is the value of "i" rejected in the for loop. There is no global var i in my code and I don't know why this is happening. This function is executed in a script tag in the head of the HTML file.

Possible duplicate of JavaScript closure inside loops – simple practical example — Teemu
– Teemu, Commented Nov 27, 2015 at 17:08
Either add a closure as proposed by A. Wolff or bind hideImages directly: aField.onclick = hideImages.bind(aField, j); — Sergio
– Sergio, Commented Nov 27, 2015 at 17:11

Community · Accepted Answer · 2017-05-23 11:45:58Z

4

You need to use a closure, e.g:

for (var i = 0; i < cameraID.length; i = i++) {
        var liField = document.createElement('li');
        var aField  = document.createElement('a');

        aField.textContent = "CAMERA " + i;

        aField.onclick = (function(i){ return function() {
            hideImages(i);
        };})(i);

        li.appendChild(aField);
        ul.appendChild(li);
    }

Now for readability, you can use a referenced method instead:

aField.onclick = hideImages.bind(aField, i);

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Nov 27, 2015 at 17:07

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

javascript argument get wrong number

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related