onmouseover для меню, созданного с помощью петли фока

Question

Я создал одно простое меню, использующее цикл в javascript, потому что большинство элементов одинаковы для каждой вкладки, поэтому я сделал все это за один проход, используя цикл for.

Мой вопрос заключается в том, как использовать событие onmouseover для изменения цвета фона вкладки, когда я наводил на него с помощью мыши.

Пример:

TopValues = [ "130px", "163px", "196px" ]; 
MenuNames = [ "Home", "Articles", "Contact" ]; 
MenuItemLinks = [ "#", "#", "#" ]; 
MenuItemTitles = [ "Go To Home", "Go To Articles", "Go To Contact" ]; 

window.onload = function makeMenu() { 
    for(var i=0; i<MenuNames.length; i++) { 
     var menu = document.createElement('a'); 
     menu.text = MenuNames[i]; 
     menu.title = MenuItemTitles[i]; 
     menu.href = MenuItemLinks[i]; 
     document.body.appendChild(menu); 

     menu.style.position = "fixed"; 
     menu.style.border = "1px solid red"; 
     menu.style.width = "90px"; 
     menu.style.top = TopValues[i]; 
     menu.style.left = "5px"; 
     menu.style.padding = "5px"; 
     menu.style.borderRadius = "5px"; 
     menu.style.textDecoration = "none"; 
     menu.style.background = "yellow"; 
     menu.style.color = "red"; 

    } 
    menu.onmouseover = function() { menu.style.background = "orange"; }; 
    menu.onmouseout = function() { menu.style.background = "yellow"; }; 
} 

В этом примере, только последняя вкладка изменяет цвет фона, как это должно быть. Можете ли вы помочь мне понять, как я должен это делать.

Я думал создать пустой массив и назначить каждой вкладке его идентификатор, а также использовать другие для цикла и операторы if, чтобы определить, какая вкладка есть, и изменить его цвет, но я не справился.

Спасибо всем

Answer 1

Переместить прослушиватель событий внутри петли.

for(var i=0; i<MenuNames.length; i++) { 
     var menu = document.createElement('a'); 
     menu.text = MenuNames[i]; 
     menu.title = MenuItemTitles[i]; 
     menu.href = MenuItemLinks[i]; 
     document.body.appendChild(menu); 

     menu.style.position = "fixed"; 
     menu.style.border = "1px solid red"; 
     menu.style.width = "90px"; 
     menu.style.top = TopValues[i]; 
     menu.style.left = "5px"; 
     menu.style.padding = "5px"; 
     menu.style.borderRadius = "5px"; 
     menu.style.textDecoration = "none"; 
     menu.style.background = "yellow"; 
     menu.style.color = "red"; 
     (function(el) { 
      el.onmouseover = function() { el.style.background = "orange"; }; 
      el.onmouseout = function() { el.style.background = "yellow"; } 
     }(menu)); 
    }