为什么我的JS循环遍历列表无法显示点击按钮人员的姓名与金额？

问题描述 #

我的JS账单拆分代码其余功能运行正常，但遍历列表的部分无法显示每位点击按钮人员的姓名及对应金额，尝试多种方法仍未解决，相关代码如下：

JS代码

const persons = []

let nameHTMLelemento = document.getElementById("name")
let amountHTMLelemento = document.getElementById("amount")
let totalHTMLelemento = document.getElementById("total")
let personsListHTMLelemento = document.getElementById("each-person")
let splitHTMLelemento = document.getElementById("split")

document.getElementById("calculate").addEventListener("click", enterPerson)

function enterPerson() {

  let person = nameHTMLelemento.value;
  let amount = amountHTMLelemento.value;

  persons.push({
    name: person,
    amount: parseFloat(amount),
  });

  nameHTMLelemento.value = "";
  amountHTMLelemento.value = "";

  defineTotal();
}

function defineTotal() {

  personsListHTMLelemento = "";

  let list = "";
  let total = 0;

  for (let i = 0; i < persons.length; i++) {
    total += persons[i].amount
    list += `${persons[i].name}: ${persons[i].amount} <br>`;
  }

  let iva = 1.21

  totalHTMLelemento.innerHTML = total * iva;
  personsListHTMLelemento.innerHTML = list;
  splitHTMLelemento.innerHTML = (total * iva) / persons.length;
}

HTML代码

<div class="card-container">
  <h1>splitter bill</h1>
  <p>enter the name of the person and his amount (21% of iva included):</p>
  <label id="name-text">Nombre</label>
  <br>
  <input type="text" id="name">
  <br>
  <label id="monto-texto">amount</label>
  <br>
  <input type="number" id="amount">
  <br>
  <button id="calculate">Ingresar</button>
  <p>Total: <span id="total"></span> </p>
  <div id="each-person">
  </div>
  <p> Cada uno le toca aportar: <span id="split"></span> </p>
</div>
<script src="main.js"></script>

问题原因 #

核心错误出在defineTotal函数里的这行代码：

personsListHTMLelemento = "";

你原本通过document.getElementById("each-person")获取了DOM元素的引用，但是这里把这个变量重新赋值为空字符串，导致后续的personsListHTMLelemento.innerHTML = list实际上是在给一个空字符串设置innerHTML，完全没有作用到页面上的DOM元素。

修复后的代码 #

只需要删除那行错误的赋值代码即可，修改后的defineTotal函数如下：

function defineTotal() {
  let list = "";
  let total = 0;

  for (let i = 0; i < persons.length; i++) {
    total += persons[i].amount
    list += `${persons[i].name}: ${persons[i].amount} <br>`;
  }

  let iva = 1.21

  totalHTMLelemento.innerHTML = total * iva;
  personsListHTMLelemento.innerHTML = list;
  splitHTMLelemento.innerHTML = (total * iva) / persons.length;
}

额外优化建议 #

• 添加输入验证：防止用户输入空姓名或非数字金额，比如在enterPerson函数开头增加判断：

  function enterPerson() {
    let person = nameHTMLelemento.value.trim();
    let amount = parseFloat(amountHTMLelemento.value);
  
    if (!person || isNaN(amount) || amount <= 0) {
      alert("请输入有效的姓名和金额");
      return;
    }
    // 后续代码不变
  }
  

• 金额格式化：显示金额时保留两位小数，提升可读性：

  totalHTMLelemento.innerHTML = (total * iva).toFixed(2);
  splitHTMLelemento.innerHTML = ((total * iva) / persons.length).toFixed(2);
  

• 界面文本汉化：把英文提示改成中文，让界面更友好：

  <h1>账单拆分器</h1>
  <p>输入人员姓名及对应金额（已包含21%增值税）：</p>
  <label id="name-text">姓名</label>
  <label id="monto-texto">金额</label>
  <button id="calculate">添加</button>
  <p>总金额：<span id="total"></span> </p>
  <p>每人需支付：<span id="split"></span> </p>
  

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