つ以上のボタン

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を使用してbuttonタグにinputタグを変更し、両方のイベントリスナーを入れてみてくださいするためのボタンが、私はテキストボックスの値を変更したい押されるたびに、この機能をacheiveことができませんでした1つは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') 

メソッド、BUT！要素の配列を取得し、addEventListenerは1つの要素を1つの要素に追加できるので、すべてのボタンにハンドラを追加する必要があります。

あなたはだからここにあなたがスイープでこれを行うことができる方法だ

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あなたは指定されたセレクタに一致するすべての要素を取得することができます。 SelectorはCSSルールのように機能します。詳細については、Googleにお尋ねしてください。

2）イベントによって呼び出される関数は、イベントオブジェクトをパラメータとして受け取ります。イベントには、イベントをトリガした要素を指すターゲット要素が含まれます。

3）element.getAttribute（ "value"）要素の任意の属性を取得できます。 bollocsという名前の属性を設定することもできますが、それでも値を取得できます！