乘客计数应用重置按钮异常：无法重置已保存乘客数

问题分析 #

• 原reset函数中saveEl = 0是错误操作：直接将DOM元素变量赋值为数字，而非修改元素的文本内容，导致点击按钮无反应。
• 之前尝试的saveEl.innertext = 0存在两个问题：
  1. 拼写错误：应为驼峰式的innerText（或兼容性更优的textContent）；
  2. 直接覆盖文本会丢失“Previous entries: ”前缀，且后续保存时会在数字后追加内容，导致格式混乱。

修复步骤 #

1. 修正reset函数 #

要保留“Previous entries: ”文本，同时重置计数记录，只需将元素的文本内容重置为初始状态：

function reset() {
  // 重置为仅显示前缀文本，若需显示0则改为"Previous entries: 0"
  saveEl.textContent = "Previous entries: ";
}

如果需求是点击后显示“Previous entries: 0”，则修改为：

function reset() {
  saveEl.textContent = "Previous entries: 0";
}

2. 确保后续保存功能正常 #

原save函数是在现有文本后追加内容，重置后需调整逻辑避免格式错误：

• 若重置为Previous entries: ：原保存逻辑无需修改；
• 若重置为Previous entries: 0：第一次保存时需先替换掉0，再追加后续记录，修改save函数如下：

function save() {
  let counterSave = count + "-";
  // 判断是否是重置后的初始0状态，是的话先替换再追加
  if (saveEl.textContent === "Previous entries: 0") {
    saveEl.textContent = "Previous entries: " + counterSave;
  } else {
    saveEl.textContent += counterSave;
  }
  countEl.textContent = 0;
  count = 0;
}

完整修正后的代码 #

JavaScript代码

let countEl = document.getElementById("count-el")
let count = 0;
let saveEl = document.getElementById("save")
let welcomeEl = document.getElementById("welcome-el")
let myName = "Gull"
let greeting = "Welcome back "
welcomeEl.innerText = greeting + " " + myName
welcomeEl.innerText += "👋"

function increment() {
  count += 1;
  countEl.innerText = count
}

function save() {
  let counterSave = count + "-";
  // 处理重置为0后的第一次保存
  if (saveEl.textContent === "Previous entries: 0") {
    saveEl.textContent = "Previous entries: " + counterSave;
  } else {
    saveEl.textContent += counterSave;
  }
  countEl.textContent = 0;
  count = 0;
}

// 重置函数：按需选择显示空白前缀或带0的前缀
function reset() {
  // 选项1：重置后显示"Previous entries: "
  // saveEl.textContent = "Previous entries: ";
  // 选项2：重置后显示"Previous entries: 0"
  saveEl.textContent = "Previous entries: 0";
}

HTML代码

（修正按钮内的Markdown加粗标记，改用HTML原生<strong>标签）

<h1>People entered</h1>
<h2 id="count-el">0</h2>

<button id="increment-btn" onclick="increment()">Increment</button>
<button id="save-btn" onclick="save()"><strong>Save</strong></button>
<button id="reset-btn" onclick="reset()"><strong>Reset</strong></button>
<p id="save">Previous entries: </p>

<p id="welcome-el"></p>
<script src="index.js"></script>

内容的提问来源于stack exchange，提问作者Omar Ali Muzaffar