Я хочу назначить функцию onclick для таких кнопок, но она не работает, почему?

Question

Я хочу назначить функцию onclick для таких кнопок

window.onload = function() {
  var tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    console.log(tablinks[i].innerText);
    tablinks[i].onclick = openCity(event,tablinks[i].innerText);
  }
}



function openCity(evt,cityName) {
    var i, tabcontent, tablinks;
    console.log(cityName);
    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active"}; 

Я вижу, что когда окно загружается, оно отправляет журналы на консоль:

Лондонская панель. js: 4:11 Лондонская панель. js: 14: 9 Парижская панель. js: 4: 11 Парижская панель. js: 14: 9 Токийская панель. js: 4: 11 Токийская панель. js: 14: 9

Но когда я нажимаю кнопку, нажатие кнопки не срабатывает. Почему?

Answer 1

Две проблемы, сначала объявляем переменную ( i ) с let, чтобы создать область действия блока для переменной и вызова функции внутри анонимной функции.

Демонстрация:

window.onload = function() {
  var tablinks = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].onclick = function(){openCity(event,tablinks[i].innerText)};
  }
}
function openCity(e, text){
  console.log(text);
}

<ul>
  <li class="tablinks">tab1</li>
  <li class="tablinks">tab2</li>
  <li class="tablinks">tab3</li>
</ul>

Answer 2

Вы уже вызываете функцию и устанавливаете возвращаемое значение в качестве значения свойства onclick, поскольку оно ничего не возвращает (будет undefined), и ничто не будет присвоено обработчику onclick.

Поэтому вместо этого оберните функцию анонимной функцией, используя ее ссылку в качестве обработчика onclick. В дополнение к этому инициализируйте i как let, чтобы сохранить значение в контексте блока.

var tablinks = document.getElementsByClassName("tablinks");
    for (let i = 0; i < tablinks.length; i++) {
        console.log(tablinks[i].innerText);
        tablinks[i].onclick = function(event) { openCity(event,tablinks[i].innerText); }
    }

}

Answer 3

Вы вызываете функцию, выполнив: tablinks[i].onclick = openCity(event,tablinks[i].innerText);

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

Пример:

window.onload = function() {
  var tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    console.log(tablinks[i].innerText);
    tablinks[i].onclick = openCity;
  }
};

  function openCity(evt) {
    const cityName = evt.currentTarget.innerText;
    var i, tabcontent, tablinks;
    console.log(cityName);
    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active"
  };
  

<button class="tablinks">TEST</button>
<div class="tablinks">TAB CONTENT</div>
<div id="TEST">TEST CITY</div>