кнопка, которая поможет вам показать ответ

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

<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
}):

Answer 2

Есть много способов сделать то, что вы ищете. Я постараюсь упростить код.

Сначала вам нужно вызвать функцию по нажатию кнопки. Простой способ сделать это - использовать атрибут onclick на вашей HTML-кнопке.

<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

вот как вы можете это сделать

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>