如何让多个按钮在同一页面上触发一个js功能答案

【问题标题】：How To have multiple buttons trigger one js function on the same page如何让多个按钮在同一页面上触发一个js功能
【发布时间】：2019-02-12 13:16:57
【问题描述】：

如何使用 2 个不同的按钮在相同的 if 语句中呈现相同的产品购买模式？

我有一个页面，我只有一个产品，但有 3 个付款按钮（2 个在一种情况下呈现，1 个在另一种情况下使用 if/else 语句呈现）。

if 部分中的第一个按钮有效，另一个按钮在 else 中有效，但第二个按钮在 if 中无效。

我尝试过使用.getElementsByClassName('purch-btn') 并分别更改按钮类。

我也尝试过使用 .querySelectorAll('btn_buy, btn_buy_two') 并将其中一个 id 分配给每个按钮。

这些都不起作用。

包视图：

<% if @pack.category_id == "sample-pack" %>

  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <button class="btn btn-success btn-block" id="btn_buy" type="button">Purchase This Library</button>
    </div>
  </div>

  <div class="col-md-12">
    <button class="btn btn-success btn-block top-drop" id="btn_buy_two" type="button">Purchase This Library</button>
  </div>

<% else %>

  <div class="col-md-8">
    <div class="wellington top-drop">
      <button class="packview-addcart btn btn-lg btn-success" id="btn_buy" type="button">Buy!</button>
    </div>
  </div>

<% end %>
<%= render 'purchase_modal' %>

购买模式：

<script>
  var handler = StripeCheckout.configure({
    key: '<%= Rails.configuration.stripe[:publishable_key] %>',
    token: function(token, arg) {
      document.getElementById("stripeToken").value = token.id;
      document.getElementById("stripeEmail").value = token.email;
      document.getElementById("chargeForm").submit();
    }
  });
  document.getElementById('btn-buy').addEventListener('click', function(e) {
    handler.open({
      zipCode: 'true',
      // image: '<%= @pack.art_link %>',
      name: '<%= @pack.title %>',
      description: 'Total: $<%= @pack.price %> USD',
      amount: document.getElementById("amount").value
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation:
  window.addEventListener('popstate', function() {
    handler.close();
  });
</script>

【问题讨论】：

使用.querySelectorAll('#btn_buy, #btn_buy_two')，然后遍历集合以添加事件监听器

标签： javascript html stripe-payments

【解决方案1】：

喜欢这个

document.querySelectorAll('#btn_buy, #btn_buy_two').forEach(function(btn) { btn.addEventListener('click', function(e) {
    handler.open(...[YOUR CODE]...);
    e.preventDefault();
  })
});

【讨论】：

【解决方案2】：

我最终只需要使用两种购买模式（每个按钮一个）。

在if 语句中，我只是为带有id="btn_buy_two" 的按钮添加了一个渲染<%= render 'purchase_modal_two' %>，因为它之后的第一个按钮(id="btn_buy") 已经为else 加载了一个和if。

这两种模式的唯一区别是：

purchase_modal：

document.getElementById('btn_buy').addEventListener('click', function(e) {

purchase_modal_two：

document.getElementById('btn_buy_two').addEventListener('click', function(e) {

我仍然对这个问题的实际答案持开放态度，因为这是一种解决方法，并且很想知道是否可以仅使用一个 <script> 部分来做到这一点！

【讨论】：

【解决方案3】：

一个解决方案可以使用document.querySelectorAll("#btn_buy, #btn_buy_two") 此函数将返回一个包含您要查找的两个元素的数组。

由于您希望它们在被点击时执行相同的操作，您需要 .forEach(function(button){}) 来遍历它们。

这个函数会一一返回按钮，并将它们存储在变量“button”中。

您现在可以对它们进行操作，因为它们是单个元素：

button.addEventListener('click', function(e) {
    handler.open({
        zipCode: 'true',
        // image: '<%= @pack.art_link %>',
        name: '<%= @pack.title %>',
        description: 'Total: $<%= @pack.price %> USD',
        amount: document.getElementById("amount").value
    });
    e.preventDefault();
});

我写了一个示例代码sn-p：

document.querySelectorAll('#btn1, #btn2').forEach(function(button) {
  button.addEventListener('click', function(e) {
    // ----- YOUR CODE -----
    console.log("some action")
  })
});

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

两个按钮执行相同的操作，无需编写两次。

（我更改了代码以使其更容易被遇到相同问题的其他用户访问）

【讨论】：