javascript - 为什么我不能添加文本并删除它？

Question

我对编程很陌生，所以如果我不理解你的解释或者这是一些常识问题，请多多包涵。

我正在开始一门 JavaScript/HTML/CSS 课程，并决定对屏幕上显示的一行代码进行自己的尝试。我想我理解了大致的想法，但我不知道为什么我输入的内容不起作用：

我的目标是，如果他们得到正确的答案，就会有一个绿色的 OK，如果他们得到错误的答案，就会有一个红色的。我不希望它们立即出现，所以我输入了一行，如果你得到了正确的 p 标签，我会清除错误的标签，反之亦然。出于某种原因，当您输入错误的答案时，不会出现绿色的 Ok。其他一切都有效（据我所见），如果你弄错了，红色的 Ok 会出现，如果你做对了，它就会被删除。问题与绿色确定有关。

我该怎么办，更重要的是，为什么会发生这种情况？

我还请询问您是否要给出一个解决方案，不要让它变得过于复杂，因为我不明白。我提醒你们我是初学者。

<script>

function reply()
{
var answer = document.getElementById("questionPrompt").value;

if (answer == "Ok")
{
    document.getElementById("rightResponse").innerHTML = "Ok";
    document.getElementById("wrongResponse").innerHTML = "";
}
else 
    document.getElementById("wrongResponse").innerHTML = "Ok";
    document.getElementById("rightResponse").innerHTML = "";
}
</script>

<input id="questionPrompt"></input>

<p id="rightResponse" style="color:green;"></p>

<p id="wrongResponse" style="color:red;"></p>

<button onclick="reply();">Click</button>

标签： javascripthtml

Answer 1

你的 else 后面没有大括号，所以编译器会查看你的 if else 就像它一样

if (answer == "Ok") {
  document.getElementById("rightResponse").innerHTML = "Ok";
  document.getElementById("wrongResponse").innerHTML = "";
} else {
  document.getElementById("wrongResponse").innerHTML = "Ok";
}
document.getElementById("rightResponse").innerHTML = "";

由于没有大括号，只有直接在 else 语句之后的行被视为 else 的一部分。所以，不管是什么answer，"rightResponse"p 标签总是设置为空白。要修复它，您只需为 else 添加大括号，以便编译器知道在 else 之后包含两行代码作为 else 的一部分，如下面的代码片段所示。

<script>
  function reply() {
    var answer = document.getElementById("questionPrompt").value;

    if (answer == "Ok") {
      document.getElementById("rightResponse").innerHTML = "Ok";
      document.getElementById("wrongResponse").innerHTML = "";
    } else {
      document.getElementById("wrongResponse").innerHTML = "Ok";
      document.getElementById("rightResponse").innerHTML = "";
    }
  }
</script>

<input id="questionPrompt"></input>

<p id="rightResponse" style="color:green;"></p>

<p id="wrongResponse" style="color:red;"></p>

<button onclick="reply();">Click</button>