如何通过同一JS函数按钮输出HTML输入值与电费计算结果？

原代码存在的问题 #

• 用户编号输入框未设置id，无法通过JS获取其值
• 显示姓名的span与姓名输入框id重复（均为name），DOM元素id必须唯一，会导致获取和赋值出错
• 三个label文本重复，语义不清晰
• JS函数未获取姓名、编号的值，也未更新对应显示区域

修正后的完整代码 #

HTML+JS部分

<body>
  <div>
    <label>ឈ្មោះអតិថិជន:</label>
    <input id="name" type="text" placeholder="ឈ្មោះអតិថិជន">
  </div>

  <div>
    <label>លេខអតិថិជន:</label>
    <input type="number" placeholder="លេខអតិថិជន" id="customerId">
  </div>

  <div>
    <label>កំរិតការប្រើប្រាស់ kwh:</label>
    <input type="number" placeholder="kwh" id="kw">
  </div>
  <button type="button" onclick="calculate()">គណនា</button>

  <p>Result: <span id="total"></span></p>
  <p>Name: <span id="displayName"></span></p>
  <p>Customer ID: <span id="displayId"></span></p>

  <script>
    function calculate() {
      // 获取所有输入值
      var userName = document.getElementById("name").value;
      var customerId = document.getElementById("customerId").value;
      var kwh = parseFloat(document.getElementById("kw").value);
      var total;

      // 电费计算逻辑
      if (kwh <= 50) {
        total = kwh * 500;
      } else if (kwh <= 100) {
        total = kwh * 1000;
      } else {
        total = kwh * 2120;
      }

      // 更新页面显示内容
      document.getElementById("displayName").textContent = userName;
      document.getElementById("displayId").textContent = customerId;
      document.getElementById("total").textContent = total;
    }
  </script>
</body>

关键修改说明 #

1. 给用户编号输入框添加id="customerId"，确保JS能获取其值
2. 将显示姓名的span改为id="displayName"，避免与输入框id冲突
3. 新增用户编号的显示区域，对应id="displayId"
4. 在calculate函数中新增获取姓名、编号的逻辑，并更新对应的显示元素
5. 用textContent替代innerHTML，更安全（避免输入内容包含HTML标签导致的意外渲染）
6. 修正label文本，让语义更准确

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