为result容器添加padding导致空框显示，如何隐藏该空框？

方法1：默认隐藏容器，提交时显示 #

让结果容器默认不显示，仅在提交后出现：

1. 修改CSS：

#result {
  background-color: #ffda01;
  padding: 10px;
  display: none; /* 默认隐藏容器 */
}

2. 更新getTotal函数，添加显示逻辑：

function getTotal() {
  const totalScore = getScore();
  const resultContainer = document.getElementById("result");
  resultContainer.innerHTML = getComment(totalScore);
  resultContainer.style.display = "block"; // 提交后显示容器
}

3. 修改resetButton函数，重置时隐藏容器：

function resetButton() {
  const resultContainer = document.getElementById("result");
  resultContainer.innerHTML = "";
  resultContainer.style.display = "none"; // 重置后隐藏
}

方法2：使用CSS :empty伪类自动控制样式 #

利用CSS伪类，当容器为空时自动清除背景色和padding，无需修改JS：

#result {
  background-color: #ffda01;
  padding: 10px;
}

/* 容器为空时重置样式，避免空白框 */
#result:empty {
  background-color: transparent;
  padding: 0;
}

方法3：优化现有displayResult函数 #

调整现有函数逻辑，配合默认隐藏的容器：

1. 保留CSS默认隐藏设置：

#result {
  background-color: #ffda01;
  padding: 10px;
  display: none;
}

2. 更新提交按钮点击事件和displayResult函数：

function displayResult() {
  const resultContainer = document.getElementById("result");
  resultContainer.style.display = "block";
}

// 提交按钮先计算分数再显示容器
document.getElementById("submit").onclick = function() {
  getTotal();
  displayResult();
};

3. 重置时隐藏容器：

function resetButton() {
  const resultContainer = document.getElementById("result");
  resultContainer.innerHTML = "";
  resultContainer.style.display = "none";
}

三种方法中，方法2无需改动JS代码，实现最简洁，推荐优先尝试。

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