JS动态生成HTML段落与按钮时的累加异常问题求助

兄弟我看你卡这儿挺久了，帮你瞅了下代码，问题其实出在全局的peopleArray一直在累加历史输入值，导致每次新输入数字后，显示的人数是之前所有输入的总和，而不是你当前输入的数字。

问题根源拆解： #

你在addPeople函数里每次都会把输入的人数push到全局的peopleArray里，比如第一次输入2，数组变成[1,2]；第二次输入3，数组又加了[3,4,5]，长度变成5，所以显示的就是5人，而不是你想要的3人。而且你后面用personOneOrMany去循环数组长度累加，完全没必要，属于多此一举的操作。

修复方案： #

我们不需要用数组来存人数，直接用当前输入的数值就行，把全局数组去掉，调整函数逻辑：

1. 删掉全局的peopleArray，因为我们只需要当前输入的人数，不需要历史记录
2. 修改addPeople函数，直接把当前输入的people值传给howManyHours
3. 简化howManyHours函数，不用循环累加，直接用传入的人数生成HTML

修改后的完整代码如下：

<!-- 你的HTML部分保持不变，这里假设你的HTML结构是这样的：
<input class="howManyPeople" type="number">
<button id="js-accept" class="accept">Принять</button>
<div class="js-howManyHours"></div>
-->

<script>
function addPeople() {
  // 获取输入值并转成数字
  const inputForPeopleElement = document.querySelector('.howManyPeople');
  const people = Number(inputForPeopleElement.value);
  
  // 清空输入框
  inputForPeopleElement.value = '';
  
  // 直接把当前人数传给生成HTML的函数
  howManyHours(people);  
}

let acceptButton = document.getElementById('js-accept');
acceptButton.addEventListener('click', addPeople);
acceptButton.addEventListener('click', acceptedClick);

function acceptedClick() {
  const changeAcceptanceElement = document.querySelector('.accept');
  if (changeAcceptanceElement.innerText === 'Принять') {
    changeAcceptanceElement.innerText = 'Принято';
  }
  setTimeout(function () {
    changeAcceptanceElement.innerText = 'Принять';
  }, 1000);
}

// 接收当前人数作为参数，直接生成HTML
function howManyHours(personCount) {
  // 这里直接用传入的personCount，不用再循环累加
  const html = `<p> ${personCount} человек </p>
<button class = "separate"> Раздельно </button>
<button> Всем </button>`;
  
  document.querySelector('.js-howManyHours').innerHTML = html;
}
</script>

改动说明： #

• 去掉了全局的peopleArray和多余的personOneOrMany变量，逻辑更清晰
• howManyHours现在直接接收当前输入的人数，生成对应的段落，每次都会覆盖之前的内容，不会累加
• 整个流程更直接：输入数字→点击按钮→清空输入→生成新的HTML覆盖旧内容，完全符合你想要的效果

你试试这个修改后的代码，应该就能解决每次输入新数字显示累加值的问题了！

备注：内容来源于stack exchange，提问作者alisonavi