JS新手求助：getElementsByName返回Undefined问题（附代码）

Hey there! Let's dig into why getElementsByName is giving you trouble with your JavaScript code. I'll break down the likely issues and fix them step by step.

First, the most common culprit: a typo! #

If you're seeing undefined, chances are you accidentally wrote document.getElementByName() (missing the final s) instead of document.getElementsByName(). The latter is the valid native method that returns a NodeList of elements matching the name attribute. The former doesn't exist at all, so it'll throw undefined when you try to use it.

Other issues in your code (that might be hiding the real problem) #

Even if you fix the typo, your code has a couple of other quirks that could cause confusion:

• Duplicate IDs: You're assigning the same id="WoodNumInput" to every input in your loop. HTML requires IDs to be unique per page—this won't break getElementsByName, but it will mess up any future use of getElementById() (it'll only ever return the first matching element).
• Using document.write: While it works for simple cases, document.write is an outdated way to add elements to the DOM. It can cause unexpected behavior if used after the page finishes loading, and it's harder to maintain than modern DOM methods.

Fixed code with best practices #

Here's a revised version of your code that fixes all these issues and demonstrates how to use getElementsByName correctly:

<html>
<style>
  /* Use a class instead of duplicate IDs */
  .wood-num-input { width: 40px; }
</style>
<body>
  <!-- A container to hold our dynamic inputs (cleaner than document.write) -->
  <div id="wood-input-container"></div>
  <br>
  <input type="button" value="calculate" onclick="calculateWoodValues()">

  <script>
    const woodTypes = ["AB_W15_L100", "AB_W20_L100", "AB_W25_L100", "AB_W30_L100"];
    const container = document.getElementById('wood-input-container');

    // Build inputs using modern DOM methods instead of document.write
    woodTypes.forEach((type, index) => {
      const div = document.createElement('div');
      div.innerHTML = `<input type="number" name="${type}" class="wood-num-input" value="${index}">`;
      container.appendChild(div);
      container.appendChild(document.createElement('br'));
    });

    function calculateWoodValues() {
      // Example: Get the value of the first wood type input
      const w15Input = document.getElementsByName('AB_W15_L100')[0];
      if (w15Input) {
        console.log(`AB_W15_L100 value: ${w15Input.value}`);
      } else {
        console.log("Couldn't find the AB_W15_L100 input!");
      }

      // Bonus: Loop through all wood types to get every input's value
      woodTypes.forEach(type => {
        const input = document.getElementsByName(type)[0];
        if (input) {
          console.log(`${type}: ${input.value}`);
        }
      });
    }
  </script>
</body>
</html>

Key fixes explained: #

1. Replaced duplicate IDs with a class: .wood-num-input lets you style all inputs without violating HTML's unique ID rule.
2. Used appendChild instead of document.write: This is a more flexible, maintainable way to add elements to the DOM, and it avoids unexpected page resets.
3. Explicit onclick function: The calculateWoodValues function clearly shows how to use getElementsByName—since each name is unique, we grab the first (and only) element from the NodeList with [0].
4. Added console logs: You can check the browser's developer tools (F12 → Console tab) to see the values being logged when you click the button.

Quick debug tip: #

If you're still stuck, open your browser's developer console and run document.getElementsByName("AB_W15_L100") manually. If it returns a NodeList with length 1, the element exists—double-check your code for typos in the method name or the name attribute value.

内容的提问来源于stack exchange，提问作者T.Custom