时间戳

首页 > 解决方案 > 帮助您显示答案的按钮

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

问题描述

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

回答下来，告诉他们他们是对还是错。我该怎么做呢？

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>

标签： javascriptif-statementbutton

解决方案

这样做的一种方法。

一个答案不需要两个单独的段落，只需使用一个，然后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>

推荐阅读