javascript - 更改具有相同 ID 的按钮值

Question

当我有这个时，它工作正常。

//php
<input id="somename" type="button" value="Text1" />

//script
<script>
  document.getElementById('somename').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

但是当我有这个时，它只适用于第一个按钮。

//php

<input id="somename" type="button" value="Text1" />
<input id="somename" type="button" value="Text1" />

//Script
<script>
  document.getElementById('somename').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

有没有办法处理任意数量的按钮？我想对所有按钮使用相同的 ID 和值。

提前致谢!

Answer 1

您应该只有 一个 具有特定 id 的元素。请改用 name 或 class HTML 属性。因此，您可以通过执行 document.getElementsByClassName 或 getElementsByName 获取元素数组。

试试这个，只使用纯 javascript

Array.prototype.forEach.call(document.getElementsByName('somename'), function(button){
    button.onclick = function(){
        this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
    };
});

并且在您的 HTML 中，请记住更改 name 属性的 id 属性:

<input name="somename" type="button" value="Text1" />
<input name="somename" type="button" value="Text1" />

我做了这个jsfiddle让你看到代码工作。检查一下!