Good day to all. There is a task: Display a list of messages. The message has the following sender, date and time, and message body. The list displays the date and time and the sender. On pointing at the sender to display the message body. Messages download from file. All gash except point with guidance. In my plan for each element with the name of the function is hung, which adds or removes the class. Visible on the corresponding element with the message. The problem is that for some reason i = 3 is passed to toggleMessage (i). I do not understand why and how to make it work properly.

function toggleMessage (counter) { messages[counter].classList.toggle("visible"); } for (var i = 0; i < names.length; i++) { names[i].onmouseover = function(){ toggleMessage(i) }; names[i].onmouseout = function(){ toggleMessage(i) }; }

The full code here: https://jsfiddle.net/x6rf5bq8/3/

    1 answer 1

    Because at the time of execution of toggleMessage(i) loop has ended and i is equal to the maximum value - names.length . You must create a closure:

     for (var i = 0; i < names.length; i++)(function(i) { names[i].onmouseover = function(){ toggleMessage(i) }; names[i].onmouseout = function(){ toggleMessage(i) }; }(i));