Как этот встроенный код onClick можно заменить на addEventListner? - PullRequest
Новая
       11

Как этот встроенный код onClick можно заменить на addEventListner?

0 голосов
/ 17 июня 2019 

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // 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";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Данный код использует старые методы и ES5.Но я не могу преобразовать его в ES6 с помощью addEventListner.

У меня проблема с такими параметрами, как названия разных городов, используемые в функции onClick (). enter code here

Ответы [ 3 ]

1 голос
/ 17 июня 2019

Для части JavaScript: 

let elements = document.querySelectorAll('.tablinks');
for(var i = 0;i < elements.length; i++){
    elements[i].addEventListener('click', function(){
        var target = elements[i].getAttribute('data-target');
        openCity(evt, document.querySelector(target));
    }, false);
}

Отредактируйте ваш HTML, чтобы он выглядел так: 

<div class="tab">
  <button class="tablinks" data-target="#London">London</button>
  <button class="tablinks" data-target="#Paris">Paris</button>
  <button class="tablinks" data-target="#Tokyo">Tokyo</button>
</div>

Почему мы используем querySelector и querySelectorAll? Так что мы можем использовать любой селектор CSS для таргетинга на наши вкладки. Например. #tabs .pages.

Почему мы используем data-target? Чтобы мы могли вводить все, что захотим, в тело элемента.

1 голос
/ 17 июня 2019

Я думаю, что в вашем комментарии нет ничего плохого, скорее, что на странице буквально нет элемента с идентификатором "defaultOpen", так что отсюда и ошибка.

0 голосов
/ 17 июня 2019

Не проверял, но это может сработать: 

 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
    tablinks[i].removeAttribute('onclick');
    tablinks[i].addEventListener('click', function() { 
       openCity(evt, evt.currentTarget.innerHTML());
    }, false);
};
...