javascript - 防止同时单击具有相同类的按钮

Question

我有两个按钮，它们具有相同的类名并具有相同的功能，但必须添加不同的输入，所以我使用了获取它们document.querySelectorAll()的方法，但是现在当我单击一个时，另一个也会被单击。有没有办法在两个按钮都forEach()没有两个的情况下防止这种情况发生？addEventListener使其一次只能单击一个按钮。

我的代码：

let inputElements = document.querySelectorAll('.inputElement');
const submitBtn = document.querySelectorAll('.submitBtn');
const backersElement = document.querySelector('.number-of-backers');

let donationsMade = [];

function calculateBamboo() {

    inputElements.forEach(inputElement => {
        const inputValue = parseFloat(inputElement.value);

        if (inputValue < 25 || inputValue === '') return alert('Pledge must be at least $25.');
        
        donationsMade.push(inputValue);
        const donationsTotal = donationsMade.reduce((a, b) => a += b);
        pledgedAmount.textContent = `$${donationsTotal}`;
        backersElement.textContent = donationsMade.length;

        return donationsTotal;

    })
}
submitBtn.forEach(button => {
    button.addEventListener('click', calculateBamboo);
})

标签： javascriptbuttonforeachevent-handling

Answer 1

它实际上并不是“单击”两个按钮。发生的情况如下：

您的calculateBamboo()函数循环遍历所有 inputElements: inputElements.forEach(); 并且您正在为所有输入执行逻辑。因此，无论您按下哪个按钮，calculateBamboo()都在处理每个输入。

使用数据属性传递目标输入将帮助您识别哪个输入属于单击的按钮

此外，@JerryBen 是对的，您不需要为每个按钮添加事件侦听器，而是可以将所有按钮包装在一个元素中，向其添加事件侦听器并识别单击了哪个元素。

const wrapper = document.getElementById('wrapper');
const pledgedAmount = document.querySelector('.backed-users');
const backersElement = document.querySelector('.number-of-backers');

wrapper.addEventListener('click', calculateBamboo);

let donationsMade = [];

function calculateBamboo(event) {
  /* Here you can access to the event argument,
    which contains target: the clicked element*/
  const el = event.target;

  if (el.nodeName !== 'BUTTON' || !el.classList.contains('submitBtn')) {
    return;
  }

  // Get target input from button's data-attr
  const targetInput = el.dataset.input;
  const inputElement = document.querySelector(`input[data-input="${targetInput}"]`);

  // Continue with the code you had...
  const inputValue = parseFloat(inputElement.value) || 0;

  if (inputValue < 25 || inputValue === '') return alert('Pledge must be at least $25.');

  donationsMade.push(inputValue);
  const donationsTotal = donationsMade.reduce((a, b) => a += b);
  pledgedAmount.textContent = `$${donationsTotal}`;
  backersElement.textContent = donationsMade.length;

  return donationsTotal;
}

<div class="backed">
  <h1 class="backed-users">0</h1>
</div>

<div class="backers">
  <h1 class="number-of-backers">0</h1>
</div>

<hr>

<div id="wrapper">
  <div class=".pledge-edition">
    <div class="pledge">
      <section class="pledgeTwo"></section>
      <div>
        <h2>Bamboo Stand</h2>
        <a href="#">Pledge $25 or more</a>
        <div>
          <h2>101</h2>
          <div>left</div>
        </div>
      </div>
    </div>

    <p>
      You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
    </p>

    <div class="pledge-amount">
      <p>Enter your pledge</p>
      <div>
        <input class="inputElement bambooInputElement" data-input="1" placeholder="$25" min="25" type="number">
        <button class="submitBtn bambooBtn" data-input="1">Continue</button>
      </div>
    </div>
  </div>

  <div class=".pledge-edition">
    <div class="pledge">
      <section class="pledgeThree"></section>
      <div>
        <h2>Black Edition Stand</h2>
        <a href="#">Pledge $75 or more</a>
        <div>
          <h2>64</h2>
          <div>left</div>
        </div>
      </div>
    </div>

    <p>
      You get a Black Special Edition computer stand and a personal thank you. You’ll be added to our Backer member list. Shipping is included.
    </p>

    <div class="pledge-amount">
      <p>Enter your pledge</p>
      <div>
        <input class="inputElement bambooInputElement" data-input="2" placeholder="$75" min="75" type="number">
        <button class="submitBtn blackEditionBtn" data-input="2" placeholder="$75" min="75">Continue</button>
      </div>
    </div>
  </div>
</div>