Question

我有一个按钮数组，每个按钮具有不同的值。我需要添加一个事件侦听器，以在单击它时进行侦听。单击的按钮的值将被推入另一个数组中。

我觉得我需要forEach，但不太适合。

function placeBet() {
  var betBtn_nodelist = document.querySelectorAll('.bet_amount > button');
  var betButtonsArr = Array.prototype.slice.call(betBtn_nodelist);

  for (var i = 0; i < betButtonsArr.length; i++) {
    betButtonsArr[i];
  }
}

<div class="bet_amount">
  <button class="five" value="5">5</button>
  <button class="ten" value="10">10</button>
  <button class="fifty" value="50">50</button>
  <button class="hundred" value="100">100</button>
</div>

Answer 1

您必须为click中的每个项目附加一个array事件处理程序。

result = [];
function placeBet(){
    var betBtn_nodelist = document.querySelectorAll('.bet_amount > button');
    var betButtonsArr = Array.prototype.slice.call(betBtn_nodelist);
    for (let i = 0; i < betButtonsArr.length; i++) {
       betButtonsArr[i].onclick = function(){
         result.push(this.value);
         console.log(result);
       }
    }
}
placeBet();

<div class="bet_amount">
    <button class="five" value="5">5</button>
    <button class="ten" value="10">10</button>
    <button class="fifty" value="50">50</button>
    <button class="hundred" value="100">100</button>
</div>

Answer 2

您可以使用jquery这样进行操作：

var values = []
$(document).on('click', 'button', function() {
  values.push(this.value)
  console.log(values)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="bet_amount">
  <button class="five" value="5">5</button>
  <button class="ten" value="10">10</button>
  <button class="fifty" value="50">50</button>
  <button class="hundred" value="100">100</button>
</div>

Answer 3

如何设置全局点击侦听器以获取值？

是的，您只需要为一个对象– <div class="bet_amount">中的所有按钮设置一个全局单击侦听器。如果为每个按钮设置一个单击侦听器，则对浏览器性能不利。

使用e.target.nodeName == 'BUTTON'，您可以识别在"bet_amount"类元素内部的单击按钮。

var result = [];

function placeBet()
{
    var betAmount = document.querySelector('.bet_amount');
    betAmount.onclick = function(e)
    {
        if(e.target.nodeName == 'BUTTON')
        {
            result.push(+e.target.value); //"+" is converting to integer
            console.log(result.join(','))
        }
    };
}
placeBet();

<div class="bet_amount">
    <button class="five" value="5">5</button>
    <button class="ten" value="10">10</button>
    <button class="fifty" value="50">50</button>
    <button class="hundred" value="100">100</button>
</div>

如何设置全局点击侦听器以从许多按钮中获取值？

3 个答案: