Javascript 如何用addEventListner替换此内联onClick代码？

函数openCity（evt，cityName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

我认为您的评论没有问题，但实际上页面上没有id为“defaultOpen”的元素，因此这就是错误的来源。
我认为您的评论没有问题，而是页面上没有id为“defaultOpen”的元素，这就是错误的来源。
尚未对其进行测试，但这可能会起作用：

 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);
};

tablinks=document.getElementsByClassName（“tablinks”）；
对于（i=0；i
尚未对其进行测试，但这可能有效：

 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);
};

tablinks=document.getElementsByClassName（“tablinks”）；
对于（i=0；i
对于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);
}

let elements=document.querySelectorAll（'.tablinks'）；
对于（var i=0；i

编辑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
和
queryselectoral
？因此，我们可以使用任何CSS选择器来定位选项卡。例如，
#选项卡页

我们为什么要使用
数据目标
？因此，我们可以在元素体中键入任何需要的内容。
对于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);
}

let elements=document.querySelectorAll（'.tablinks'）；
对于（var i=0；i

编辑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
和
queryselectoral
？因此，我们可以使用任何CSS选择器来定位选项卡。例如，
#选项卡页

我们为什么要使用
数据目标
？这样我们就可以在元素体中键入任何需要的内容。
谢谢您的回答。事实上，我想摆脱openCity事件，使用onClick AnWhere解决它。谢谢你的回答。实际上，我想摆脱openCity事件，使用onClick和where解决它