JavaScript中addEventListener调用问题：如何正确显示总价计算结果？

Let's break down the issues in your code and fix them step by step — I've run into these exact gotchas before!

Key Problems in Your Original Code #

1. Collections instead of single elements:
   document.getElementsByClassName("take") and document.getElementsByName("size1") return collections (HTMLCollection/NodeList), not individual elements. You can't call .addEventListener() or access .value directly on these collections.
2. Stale input values:
   You're grabbing the input values once when the page loads. If the user updates the inputs later, your code will still use the initial values instead of the new ones.

Corrected Code #

Here's a revised version that works reliably, even when inputs are updated multiple times:

window.onload = function() {
  // Grab the button (assuming one button with class "take" — adjust if multiple)
  const takeButton = document.getElementsByClassName("take")[0];
  // Grab the input elements by name
  const size1Input = document.getElementsByName("size1")[0];
  const size2Input = document.getElementsByName("size2")[0];

  // Attach click event to the button
  takeButton.addEventListener("click", calculateTotal, false);

  function calculateTotal() {
    // Get the latest input values EVERY time the button is clicked
    const size1 = parseFloat(size1Input.value) || 0;
    const size2 = parseFloat(size2Input.value) || 0;

    // Calculate your total (adjust this logic to match your actual pricing formula)
    const estimatedTotal = size1 + size2;

    // Display the result — replace "total-display" with your element's ID/class
    const resultElement = document.getElementById("total-display");
    if (resultElement) {
      resultElement.textContent = `Estimated Total: ${estimatedTotal}`;
    }
  }
};

What Changed & Why #

• Targeted single elements: Used [0] to pull the first element from the collections (adjust this with a loop if you have multiple buttons/inputs).
• Fresh values on click: Moved input value retrieval inside the calculateTotal function, so it always gets the current values when the user clicks.
• Handled invalid inputs: Added parseFloat() to convert text inputs to numbers, and || 0 to avoid NaN results if inputs are empty or non-numeric.
• Explicit result display: Included code to render the total — make sure your HTML has an element like <div id="total-display"></div> to show the output.

If You Have Multiple Buttons #

If there are multiple .take buttons, replace the button selection code with a loop to attach the event listener to each one:

const takeButtons = document.getElementsByClassName("take");
for (let i = 0; i < takeButtons.length; i++) {
  takeButtons[i].addEventListener("click", calculateTotal, false);
}

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