每次按下按钮，我想改变文本框的值时，无法达致这功能为多个按键

Question

<td><input type="button" name="btnOne" id="btnOne" value="5.50" onclick="setText5()" /></td> 
<td><input type="button" name="btnTwo" id="btnTwo" value="1.00" onclick="setText1()" /><!--<a href="#">&pound; 1.00/a>--></td> 

<script> 

    window.onload = function() { 
    document.getElementById('btnOne').addEventListener('click', function(){ 
     document.getElementById('textbox1').value = document.getElementById('textbox1').value + document.getElementById('btnOne').value; 
    }); 
} 

    window.onload = function() { 
    document.getElementById('btnOne').addEventListener('click', function(){ 
     document.getElementById('textbox1').value = document.getElementById('textbox1').value + document.getElementById('btnOne').value; 
    }); 
} 

</script> 

Answer 1

尝试在btnOne使用.innerHTML和改变input标签button标签，并把两个事件监听器在一个window.onload和没有onclick，因为你已经有事件监听器。在这里：

<div id="textbox1"></div> 
 
<td> 
 
    <button name="btnOne" id="btnOne">0.05</button> 
 
</td> 
 
<td> 
 
    <button name="btnTwo" id="btnTwo">1.00</button> 
 
    <!--<a href="#">&pound; 1.00/a>--></td> 
 

 
<script> 
 
    window.onload = function() { 
 
     document.getElementById('btnOne').addEventListener('click', function() { 
 
      document.getElementById('textbox1').innerHTML = document.getElementById('textbox1').innerHTML + document.getElementById('btnOne').innerHTML; 
 
     }); 
 

 

 

 
     document.getElementById('btnTwo').addEventListener('click', function() { 
 
      document.getElementById('textbox1').innerHTML = document.getElementById('textbox1').innerHTML + document.getElementById('btnTwo').innerHTML; 
 
     }); 
 
    } 
 

 

 

 

 
</script>

Answer 2

的按钮添加事件侦听器，ID为 “btnTwo”。并且不要使用onclick，因为您已经为click事件添加了事件侦听器。

下面是相同的代码片段：

<td><input type="button" name="btnOne" id="btnOne" value="5.50" /></td> 
<td><input type="button" name="btnTwo" id="btnTwo" value="1.00" /><!--<a href="#">&pound; 1.00/a>--></td> 

<script> 
    window.onload = function() { 
     document.getElementById('btnOne').addEventListener('click', function() { 
      document.getElementById('textbox1').value = document.getElementById('textbox1').value + document.getElementById('btnOne').value; 
     }); 
     document.getElementById('btnTwo').addEventListener('click', function() { 
      document.getElementById('textbox2').value = document.getElementById('textbox2').value + document.getElementById('btnTwo').value; 
     }); 
    } 
</script> 

Answer 3

如果你需要相同的事件监听器添加到所有的按钮，然后

的document.getElementById（ 'btnOne'）

时您尝试选择这样的元素，您将从dom树中获得具有此类id的第一个元素，并停止搜索，您可以使用

document.getElementsByClassName('className') 

方法，但！您将获得一组元素，addEventListener允许您将一个处理程序添加到一个元素，因此您需要循环为所有按钮添加处理程序。

你可以写类似

var buttonsArr = document.getElementsByClassName('className'); 
    for(var i = 0; i < buttonsArr.length; i++){ 
      [i].addEventListener('click', function(){ 
      //do something here 
      }); 
     } 

Answer 4

因此，这里是你如何能进行的扫描做到这一点。这个例子假设你所有的按钮都被用来为给定的文本框添加值。但是，您可以简单地调整查询选择器以满足您的需求。

function addValue(e){ 
    var tb = document.querySelector("#textbox1"), 
     val = e.target.getAttribute('value'), 
     tbVal = tb.value; 
    tb.value = parseInt(tbVal) + parseInt(val); 
} 

var btn = document.querySelectorAll("input[type=button]") 
for(var i = 0; i < btn.length; i++){ 
    btn[i].addEventListener("click", addValue); 
} 

快速的解释：

1）document.querySelectorAll可以让你获得一个给定的选择器匹配的所有元素。选择器像CSS规则一样工作。欲了解更多信息，你可能想要问谷歌。

2）事件调用的函数接收事件对象作为参数。一个事件包含一个指向触发事件的元素的目标元素。

3）element.getAttribute（“value”）允许您获取元素的任何属性。你可以设置一个名为bollocs的属性，你仍然可以检索它的值！