Помогите исправить функцию

216

25 января 2019, 11:20

Суть функции заключается в том, чтобы при нажатии на кнопку переводить элементы по Id, но после нажатия функция срабатывает только на одном элементе. Подскажите что можно сделать?

function connectValue(btnId, elemId, txt) { 
document.getElementById(btnId).onclick = function () {
document.getElementById(elemId).lastChild.nodeValue = txt;  
};
}
connectValue("ru", "1", "ГЛАВНАЯ");
connectValue("en", "1", "HOME");
connectValue("ru", "2", "КОНТАКТЫ");
connectValue("en", "2", "CONTACTS");

Answer 1

Проблема в том что вы используете .onclick, и при каждом вызове connectValue свойство .onclick, которое хранит обработчик события, перезаписывается. Если вам нужно добавить несколько обработчиков используйте addEventListener. Тут подробная документация.

function connectValue(btnId, elemId, txt) {  
  document.getElementById(btnId).addEventListener('click', function() { 
    document.getElementById(elemId).lastChild.nodeValue = txt;   
  }); 
} 
 
connectValue("ru", "1", "ГЛАВНАЯ"); 
connectValue("en", "1", "HOME"); 
 
connectValue("ru", "2", "КОНТАКТЫ"); 
connectValue("en", "2", "CONTACTS");

<div id="1">ГЛАВНАЯ</div> 
<div id="2">КОНТАКТЫ</div> 
 
<button id="ru">RU</button> 
<button id="en">EN</button>

Answer 2

Надо давать обработчик события через addEventListener('click', function () { потому что onclick это всего лишь свойство объекта, которое вы перезаписываете.

function connectValue(btnId, elemId, txt) { 
  document.getElementById(btnId).addEventListener('click', function () {
    document.getElementById(elemId).lastChild.nodeValue = txt;  
  });
}
connectValue("ru", "1", "ГЛАВНАЯ");
connectValue("en", "1", "HOME");
connectValue("ru", "2", "КОНТАКТЫ");
connectValue("en", "2", "CONTACTS");