使用JavaScript的getElementsByName及替代getElementById实现多输入乘法运算问题

嘿，完全可以不用getElementById来实现！下面给你两种实用的方法，都是通过元素的name属性来获取输入值，然后完成乘法运算：

方法1：使用document.getElementsByName() #

这个方法会返回一个包含所有匹配指定name属性的元素的NodeList，我们可以遍历它来获取每个输入框的值，再计算乘积。

示例代码： #

HTML部分：

<input type="number" name="factor" placeholder="输入乘数">
<input type="number" name="factor" placeholder="输入乘数">
<input type="number" name="factor" placeholder="输入乘数">
<button onclick="calculateProduct()">计算乘积</button>
<p>结果：<span id="result"></span></p>

JavaScript部分：

function calculateProduct() {
  // 获取所有name为factor的输入元素
  const inputs = document.getElementsByName('factor');
  let product = 1;
  
  // 遍历输入元素，计算乘积
  for (const input of inputs) {
    // 确保输入值是有效数字，避免NaN
    const value = parseFloat(input.value);
    if (!isNaN(value)) {
      product *= value;
    }
  }
  
  // 显示结果
  document.getElementById('result').textContent = product;
}

方法2：使用document.querySelectorAll() #

这个方法支持CSS选择器，我们可以用[name="你的name值"]来精准选中目标元素，用法和上面类似，但灵活性更强（比如可以结合其他属性筛选）。

示例代码： #

JavaScript部分（HTML和上面一致）：

function calculateProduct() {
  // 通过CSS选择器选中所有name为factor的输入框
  const inputs = document.querySelectorAll('input[name="factor"]');
  let product = 1;
  
  inputs.forEach(input => {
    const value = parseFloat(input.value);
    if (!isNaN(value)) {
      product *= value;
    }
  });
  
  document.getElementById('result').textContent = product;
}

小提示： #

• 记得处理空值或非数字输入，用parseFloat()转换后判断isNaN()，不然乘积会变成NaN哦。
• 如果你的输入框可能有默认值或者需要排除禁用状态的输入，可以在选择器里加上:not(:disabled)，比如document.querySelectorAll('input[name="factor"]:not(:disabled)')。

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