JavaScript多选择框值求和函数编写及运行故障排查

核心问题点 #

• 重复声明全局变量option：三次使用let option声明全局变量，会导致变量被重复覆盖，不同模块的选中值互相干扰。
• myFunction3中的变量错误：函数内获取了selection3元素，但取值时误用了selection2，导致无法正确获取第三个选择框的选中值。
• 重复定义函数processItem2：第三个模块的计算函数被错误命名为processItem2，覆盖了第二个模块的同名函数，导致第三个模块的按钮无法触发正确的计算逻辑。
• 全局变量共享风险：三个模块共用同一个全局option，切换选择框时会互相覆盖值，导致计算结果错误。

修复后的代码 #

HTML部分（补充完整三个模块结构）

<tr>
  <th><select id="selection" onchange="myFunction()">
          <option id="0" value="0">None</option>
          <option id="1" value="4.00">Women Suit</option>
          <option id="2" value="10.00">Dress</option>
          <option id="3" value="6.00">Regular Skirt</option>
          <option id="4" value="7.00">Skirt With Hook</option>
          <option id="5" value="8.00">Men's Suit 2Pc</option>
          <option id="6" value="9.00">Men's Suit 3Pc</option>
          <option id="7" value="15.00">Sweaters</option>
          <option id="8" value="25.00">Silk Shirt</option>
          <option id="9" value="12.00">Tie</option>
          <option id="10" value="13.00">Coat</option>
          <option id="11" value="14.00">Jacket</option>
          <option id="12" value="15.00">Swede</option>
        </select></th>
  <td><div><input type="text" name="price" id="priceitem1"></div></td>
  <td><div><input type="number" name="qtyItem1" id="qtyItem1" size="20" /></div></td>
  <td><div><input type="button" value="Calc" onclick="processItem1()"></div></td>
  <td><div><input type="text" name="sumItem1" id="sumItem1"></div></td>
</tr>
<tr>
  <th><select id="selection2" onchange="myFunction2()">
          <option id="0" value="0">None</option>
          <option id="1" value="4.00">Women Suit</option>
          <option id="2" value="10.00">Dress</option>
          <option id="3" value="6.00">Regular Skirt</option>
          <option id="4" value="7.00">Skirt With Hook</option>
          <option id="5" value="8.00">Men's Suit 2Pc</option>
          <option id="6" value="9.00">Men's Suit 3Pc</option>
          <option id="7" value="15.00">Sweaters</option>
          <option id="8" value="25.00">Silk Shirt</option>
          <option id="9" value="12.00">Tie</option>
          <option id="10" value="13.00">Coat</option>
          <option id="11" value="14.00">Jacket</option>
          <option id="12" value="15.00">Swede</option>
        </select></th>
  <td><div><input type="text" name="price" id="priceitem2"></div></td>
  <td><div><input type="number" name="qtyItem2" id="qtyItem2" size="20" /></div></td>
  <td><div><input type="button" value="Calc" onclick="processItem2()"></div></td>
  <td><div><input type="text" name="sumItem2" id="sumItem2"></div></td>
</tr>
<tr>
  <th><select id="selection3" onchange="myFunction3()">
          <option id="0" value="0">None</option>
          <option id="1" value="4.00">Women Suit</option>
          <option id="2" value="10.00">Dress</option>
          <option id="3" value="6.00">Regular Skirt</option>
          <option id="4" value="7.00">Skirt With Hook</option>
          <option id="5" value="8.00">Men's Suit 2Pc</option>
          <option id="6" value="9.00">Men's Suit 3Pc</option>
          <option id="7" value="15.00">Sweaters</option>
          <option id="8" value="25.00">Silk Shirt</option>
          <option id="9" value="12.00">Tie</option>
          <option id="10" value="13.00">Coat</option>
          <option id="11" value="14.00">Jacket</option>
          <option id="12" value="15.00">Swede</option>
        </select></th>
  <td><div><input type="text" name="price" id="priceitem3"></div></td>
  <td><div><input type="number" name="qtyItem3" id="qtyItem3" size="20" /></div></td>
  <td><div><input type="button" value="Calc" onclick="processItem3()"></div></td>
  <td><div><input type="text" name="sumItem3" id="sumItem3"></div></td>
</tr>

JavaScript部分

// 模块1：独立逻辑，避免全局变量冲突
function myFunction() {
  const selection = document.getElementById("selection");
  const option = selection.options[selection.selectedIndex].value;
  document.getElementById("priceitem1").value = option;
}
function processItem1() {
  const selection = document.getElementById("selection");
  const option = selection.options[selection.selectedIndex].value;
  const quantity = Number(document.getElementById("qtyItem1").value);
  const sum = quantity * Number(option);
  document.getElementById("sumItem1").value = sum;
}

// 模块2：修正全局变量问题，确保逻辑独立
function myFunction2() {
  const selection2 = document.getElementById("selection2");
  const option = selection2.options[selection2.selectedIndex].value;
  document.getElementById("priceitem2").value = option;
}
function processItem2() {
  const selection2 = document.getElementById("selection2");
  const option = selection2.options[selection2.selectedIndex].value;
  const quantity = Number(document.getElementById("qtyItem2").value);
  const sum = quantity * Number(option);
  document.getElementById("sumItem2").value = sum;
}

// 模块3：修复变量错误和函数名重复问题
function myFunction3() {
  const selection3 = document.getElementById("selection3");
  const option = selection3.options[selection3.selectedIndex].value;
  document.getElementById("priceitem3").value = option;
}
function processItem3() {
  const selection3 = document.getElementById("selection3");
  const option = selection3.options[selection3.selectedIndex].value;
  const quantity = Number(document.getElementById("qtyItem3").value);
  const sum = quantity * Number(option);
  document.getElementById("sumItem3").value = sum;
}

额外优化建议 #

可以封装通用函数减少重复代码，让维护更方便：

// 通用更新价格函数
function updatePrice(selectId, priceInputId) {
  const select = document.getElementById(selectId);
  const price = select.options[select.selectedIndex].value;
  document.getElementById(priceInputId).value = price;
}

// 通用计算总价函数
function calculateSum(selectId, qtyInputId, sumInputId) {
  const select = document.getElementById(selectId);
  const price = Number(select.options[select.selectedIndex].value);
  const quantity = Number(document.getElementById(qtyInputId).value);
  const sum = price * quantity;
  document.getElementById(sumInputId).value = sum;
}

对应HTML调用改为：

<select id="selection" onchange="updatePrice('selection', 'priceitem1')">
<!-- ... -->
<input type="button" value="Calc" onclick="calculateSum('selection', 'qtyItem1', 'sumItem1')">

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