如何使用单个函数更改网页中所有按钮的 innerHTML？

Question

我的页面中有 9 个按钮。每当我点击一个按钮时，按钮的内部 HTML 应该改变。如何使用单个 JavaScript 函数实现此目的？即我该怎么做才能让代码检测到 HTML?

中的不同按钮

<html>
<script>
function changeHtml(){
alert("h");                     
element.innerHTML = "y"; /* I tried to achieve this by setting the "element" to "this"
i++                         However I am getting an error innerHTML of null is undefined.*/ 
}
element.onclick = changeHtml;
</script>
<body>
<button id = "but1" ></button>
<button id = "but2" ></button>
<button id = "but3" ></button>
<button id = "but4" ></button>
<button id = "but5" ></button>
<button id = "but6" ></button>
<button id = "but7" ></button>
<button id = "but8" ></button>
<button id = "but9" ></button>
</body>
</html>

应该如何修改代码，以便每当我单击一个按钮时，让它成为第一个或第六个按钮，代码应该检测到该按钮并因此调用该按钮上的 "changeHtml" 函数？

Answer 1

您可以简单地获取所有按钮并为每个按钮分配一个点击侦听器。为了区分它们，您可以在每个按钮上使用自定义 data-* 属性（如果您不想只依赖按钮的文本）。您可以使用getAttribute方法访问该属性，因此您可以进行条件切换等

看这个例子：

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
  var b = buttons[i];
  b.addEventListener('click', function(){
    alert('button ' + this.getAttribute('data-num') + ' clicked!');
    this.textContent = '-' + this.textContent + '-';
    })
  }

<button data-num="1">Button</button>
<button data-num="2">Button</button>
<button data-num="3">Button</button>
<button data-num="CRAZY">Crazy Button</button>
<button data-num="Where's Luigi?">Super Mario Button</button>

Answer 2

Select所有按钮然后循环它们并分配你想要的HTML，其中.button是每个按钮的class。如果你不想依赖 classes 你可以使用标记方法 .getElementsByTagName.

var buttons = document.getElementsByClassName('button');

for(var i = 0; i < buttons.length; i++)
    buttons[i].addEventListener('click', function(){
       this.innerHTML = "Text changed!";
    });

如果你想要一个一个的，你可以这样做：

 var buttons = document.getElementsByClassName('button');

button[0].addEventListener('click', function(){
   this.innerHTML = "I am the first button"
});

如何使用单个函数更改网页中所有按钮的 innerHTML？

How can i use a single function to change the innerHTML of all the buttons in a webpage?

html

javascript

button