Javascript 更改具有相同ID的按钮值

当我有这个，它的工作很好

//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和值

---

提前谢谢你

您应该使用类，而不是id。您可以使用JQuery设置侦听器并更改somename类的所有元素的值：

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

<script>
  $('.somename').click(function(){$(this).val(this.value === 'Text1' ? 'Text2' : 'Text1')});
</script>

---

Fiddle:

您应该使用类，而不是id。您可以使用JQuery设置侦听器并更改somename类的所有元素的值：

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

<script>
  $('.somename').click(function(){$(this).val(this.value === 'Text1' ? 'Text2' : 'Text1')});
</script>

Fiddle:

您应该只有一个具有特定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中，请记住更改名称属性的id属性：

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

我做这个是为了让你看到代码工作。看看

您应该只有一个具有特定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中，请记住更改名称属性的id属性：

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

---

我做这个是为了让你看到代码工作。看看

使用类而不是id，然后对它们进行迭代

//php

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

//Script
<script>
   var someNamesElm = document.getElementsByClass('somename');
   var someNamesElmNbr = someNamesElm.length;
   for (var i = 0; i < someNamesElmNbr; i++) {
     someNamesElm[i].onclick = function(){
        this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
     }        
  }
</script>

---

使用类而不是id，然后对它们进行迭代

//php

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

//Script
<script>
   var someNamesElm = document.getElementsByClass('somename');
   var someNamesElmNbr = someNamesElm.length;
   for (var i = 0; i < someNamesElmNbr; i++) {
     someNamesElm[i].onclick = function(){
        this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
     }        
  }
</script>

---

为什么你暗示jQuery是必需的？事实并非如此，我用纯JS对@raina77ow的答案进行了投票。但是，JQuery确实使代码变得更简单了。当我按下一个按钮时，所有按钮的值都会发生变化。是；我误解了我想要的行为。如果您只想更改单个按钮的值，请使用$this.val。。。而不是$'.somename'.val…，或者只是this.value=this.value。。。。不必完全使用jQuery。尽管如此，我还是给jQuery加了+1，因为它显示了jQuery的不同之处——人们不必担心跨平台兼容性和IE事件怪癖。你为什么暗示jQuery是必需的？事实并非如此，我用纯JS对@raina77ow的答案进行了投票。但是，JQuery确实使代码变得更简单了。当我按下一个按钮时，所有按钮的值都会发生变化。是；我误解了我想要的行为。如果您只想更改单个按钮的值，请使用$this.val。。。而不是$'.somename'.val…，或者只是this.value=this.value。。。。不必完全使用jQuery。尽管如此，我还是给jQuery加了+1，因为它显示了jQuery的不同之处——人们不必担心跨平台兼容性和IE事件的怪癖。如果不更改HTML，这将不起作用。您可能想解释一下……如果不更改HTML，这将不起作用。你可能想解释一下……类完成了你想做的事情。类完成了你想做的事情。