测验应用空提交重复渲染错误消息问题求助

问题背景 #

我正在开发一款测验应用，功能包括逐个渲染题目、展示结果表格，用户可将分数和姓名提交到排行榜页面。原本用alert实现空姓名提交的错误提示正常，但换成自定义提示后出现两个问题：

• 每次点击提交都会重复渲染错误消息
• 输入框填值后错误消息不会消失
  另外希望错误提示显示在输入框下方，而非提交按钮位置。

原alert版本错误提示代码：

else {
    alert("Please input your your name before submitting your score");
}

现有提交处理函数代码：

const handleResultsForm = (event) => {
  event.preventDefault();

  //get name from form
  const fullName = document.getElementById("fname").value;

  if (fullName) {
    const yourScore = {
      userName: fullName,
      score: timerValue,
    };

    const highScores = readFromLocalStorage();

    //push score object into LS
    highScores.push(yourScore);

    highScores.sort((a, b) => b.score - a.score);

    writeToLocalStorage("highscores", highScores);

    // render high scores page
    renderHighScores();
  } else {
    //if name input is empty show error message
    const nameInput = document.createElement("p");
    nameInput.setAttribute("class", "confirm-name");
    nameInput.setAttribute("id", "error-name");
    nameInput.textContent = "Please enter your name";

    const fullName = document.getElementById("submit-to-high-scores-button");
    fullName.appendChild(nameInput);
  }
};

// add submit event handler to form
submitScoresBtn.addEventListener("click", handleResultsForm);

问题根源 #

• 重复创建元素：每次空提交都会新建一个错误提示<p>，未检查是否已存在，导致重复渲染
• 插入位置错误：把提示元素加到了提交按钮内部，而非输入框下方
• 无清除逻辑：输入框填值后没有自动清除错误提示，提交成功时也未处理

修复代码 #

const handleResultsForm = (event) => {
  event.preventDefault();

  // 获取输入框元素及值
  const nameInputElement = document.getElementById("fname");
  const fullName = nameInputElement.value.trim();

  // 先清除已有的错误提示
  const existingError = document.getElementById("error-name");
  if (existingError) {
    existingError.remove();
  }

  if (fullName) {
    const yourScore = {
      userName: fullName,
      score: timerValue,
    };

    const highScores = readFromLocalStorage();
    highScores.push(yourScore);
    highScores.sort((a, b) => b.score - a.score);
    writeToLocalStorage("highscores", highScores);

    renderHighScores();
  } else {
    // 创建错误提示元素
    const errorMsg = document.createElement("p");
    errorMsg.setAttribute("class", "confirm-name");
    errorMsg.setAttribute("id", "error-name");
    errorMsg.textContent = "Please enter your name";

    // 插入到输入框的下方位置
    nameInputElement.parentNode.insertBefore(errorMsg, nameInputElement.nextSibling);
  }
};

// 监听输入框：输入内容时自动清除错误提示
document.getElementById("fname").addEventListener("input", () => {
  const existingError = document.getElementById("error-name");
  if (existingError) {
    existingError.remove();
  }
});

// 绑定提交按钮点击事件
submitScoresBtn.addEventListener("click", handleResultsForm);

可选CSS优化（让提示更美观） #

.confirm-name {
  color: #dc3545; /* 危险提示色 */
  font-size: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

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