Hey folks! Let's tackle your two JavaScript button onClick questions step by step—first the general approach, then targeting that specific "BUY NOW" button you shared.

There are two common ways to bind click events to buttons, each with its own use case:

• Directly set the onclick property
  You can grab the button element and assign a function to its onclick property. This is straightforward but will overwrite any existing click events bound to the button. Example:

  // Assume your button has an ID "myButton"
  const myButton = document.getElementById('myButton');
  myButton.onclick = function() {
    alert('Button clicked!');
  };
  // Or use an arrow function for brevity
  myButton.onclick = () => alert('Button clicked!');
  

• Use addEventListener (Recommended)
  This method is more flexible because it lets you bind multiple click handlers without overwriting existing ones. It's the preferred approach for most scenarios:

  const myButton = document.getElementById('myButton');
  myButton.addEventListener('click', function() {
    alert('Button clicked via event listener!');
  });
  // Arrow function version
  myButton.addEventListener('click', () => alert('Button clicked via event listener!'));
  

Your target button code is:

<button type="submit" name="add-to-cart" value="41" class="single_add_to_cart_button button alt">BUY NOW</button>

We can target this button using its class, name, or value attribute. Here are the most reliable methods:

Option 1: Target by Class (Most Reliable) #

The single_add_to_cart_button class is likely unique to this button. Use querySelector to grab it, then bind the click event:

// Wait for the DOM to fully load before running the code
document.addEventListener('DOMContentLoaded', function() {
  const addToCartBtn = document.querySelector('.single_add_to_cart_button');
  
  // Bind click event (with preventDefault since it's a submit button)
  addToCartBtn.addEventListener('click', function(e) {
    e.preventDefault(); // Stop the default form submission
    alert('Item added to cart!');
    // Add your custom logic here
  });
});

Note: Since this is a type="submit" button, we use e.preventDefault() to stop the form from submitting automatically—remove this if you want to keep the default submit behavior alongside your custom code.

Option 2: Target by Name Attribute #

Use the button's name="add-to-cart" attribute to select it:

document.addEventListener('DOMContentLoaded', function() {
  const addToCartBtn = document.querySelector('button[name="add-to-cart"]');
  
  addToCartBtn.onclick = function(e) {
    e.preventDefault();
    console.log('Add to cart button clicked!');
  };
});

Option 3: Target by Value Attribute #

If the value="41" is unique to this button, you can use that too:

document.addEventListener('DOMContentLoaded', function() {
  const addToCartBtn = document.querySelector('button[value="41"]');
  
  addToCartBtn.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('Button with value 41 clicked!');
  });
});

Critical Note: DOM Load Timing #

Always make sure your JavaScript runs after the DOM is fully loaded—otherwise, the code will try to select a button that doesn't exist yet. Wrapping your code in DOMContentLoaded (as shown above) or placing your <script> tag right before the closing </body> tag will fix this issue.

内容的提问来源于stack exchange，提问作者bohdan bohdan