javascript - 如何让多个按钮在同一页面上触发一个js函数

Question

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

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

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

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

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

这些都不起作用。

打包 View :

<% 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>

Answer 1

像这样

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