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

这就是你如何做到的

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

<input type="text" id="answer"> </button> <button id="SbnAnswer" type="button" onclick="sbnAnswer()">Answer</button>

 <p id="right" value="right"></p>

 <p id="wrong" value="wrong"></p>

Answer 2

有很多方法可以做你想要的。我将尝试简化代码。

首先，您需要在单击按钮时调用函数。这样做的简单方法是通过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>

Answer 3

这样做的一种方法。

一个答案不需要两个单独的段落，只需使用一个，然后js使用.textContent方法根据答案填写文本。

const btn = document.querySelector('#SbnAnswer');
const input = document.querySelector('#answer');
const output = document.querySelector('#output');

btn.addEventListener('click', event => {
  const answer = input.value.toLowerCase();
  if (answer === 'a map' || answer === 'map') {
    output.textContent = 'Congratulations, you answered right!';
  } else {
    output.textContent = '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 id="SbnAnswer">submit</button>
<p id="output"></p>

Answer 4

<input type="text" id="ans" />
<button id="btn"></button>

现在您可以添加事件侦听器

var btn = document.getElementById('btn');
btn.addEventListener('click', function() { 
var val = document.getElementById('ans').value; 
// do your checks now
}):

帮助您显示答案的按钮

4 个答案: