javascript - 帮助您显示答案的按钮

Question

我正在尝试制作一个按钮，如果观众在输入字段中输入答案，他们会得到一个

答案，告诉他们是错还是对。我该怎么做？

var SbnAnswer = document.getElementById('answer').value;

function SbnAnswer() {
  if (answer === "a map" || "map") {
    var answer = toLowerCase();
    document.getElementById('right').innerHTML = "Congratulations, you answered right!";
  } else {
    (document.getElementById('wrong').innerHTML = "Your answer is wrong.");
  }
}

<p>I have mountains - but no rocks, forest - but no trees, river - but no water. I'm here to help you. What am I?</p>
<input type="text" id="answer"> </button> <button id="SbnAnswer" type="button">Answer</button>
<p id="right" value="right"></p>
<p id="wrong" value="wrong"></p>

Answer 1

有很多方法可以满足您的需求。我会尽量简化代码。

首先，您需要在单击按钮时调用一个函数。执行此操作的简单方法是通过 html 按钮上的 onclick 属性。

<button id="SbnAnswer" type="button" onclick="SbnAnswer()">Answer</button>

一旦我们有了它，我们就可以处理这个函数了

首先，您需要在函数内部而不是外部获取答案的值。这样每次单击按钮时值都会更新。

var SbnAnswer = document.getElementById('answer').value;

然后你可以把答案变成小写

var answer = SbnAnswer.toLowerCase();

我建议结合这两个步骤来获得下一个结果

var answer = document.getElementById('answer').value.toLowerCase();

希望这有帮助:)

function SbnAnswer() {
  //var SbnAnswer = .value;
  var answer = document.getElementById('answer').value.toLowerCase();
  console.log(answer)
  
    if (answer === "a map" || answer === "map") {
    document.getElementById('right').innerHTML = "Congratulations, you answered right!";
  } else {
  document.getElementById('wrong').innerHTML = "Your answer is wrong.";
  }
  
}

<input type="text" id="answer">
<button id="SbnAnswer" type="button" onclick="SbnAnswer()">Answer</button>

<p id="right" value="right"></p>

<p id="wrong" value="wrong"></p>