Как я могу установить глобальный слушатель щелчка, чтобы получить значение от многих кнопок? - PullRequest
Новая
       9

Как я могу установить глобальный слушатель щелчка, чтобы получить значение от многих кнопок?

0 голосов
/ 17 января 2019

У меня есть массив кнопок, каждая из которых содержит различное значение. Мне нужно добавить прослушиватель событий для прослушивания, когда он был нажат. Значение нажатой кнопки будет помещено в другой массив.

Я чувствую, что мне нужно 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>

Ответы [ 3 ]

0 голосов
/ 17 января 2019

Вы можете сделать это так, используя 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>
0 голосов
/ 17 января 2019

как я могу установить прослушиватель глобального щелчка, чтобы получить значение?

Да, вы должны установить global click listener для всех кнопок только в одном объекте - <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>
0 голосов
/ 17 января 2019

Вы должны прикрепить обработчик событий 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>
...