Question

我正在尝试创建一个简单的游戏，您必须从计算中回答正确的答案。

我已经具有生成随机计算的功能，但是我不知道如何将其与用户编写的结果进行比较。

我尝试制作if，因此当用户按下“提交”按钮时，应用程序将尝试确定这是否是正确的答案。

var numArray = ["10/2", "5x5", "12-22", "5-6", "20-70"];
var question = document.getElementById("textQuestion");
var answer = document.getElementById("textAnswer");

function rollDice() {
  document.form[0].textQuestion.value = numArray[Math.floor(Math.random() * numArray.length)];
}

function equal() {
  var dif = document.forms[0].textQuestion.value
  if (dif != document.forms[0].textAnswer.value) {
    life--;
  }
}

<form>
  <input type="textview" id="textQuestion">
  <br>
  <textarea id="textAnswer" form="post" placeholder="Answer"></textarea>
</form>
<input type="button" name="start" onclick="">

Answer 1

document.forms[0].textQuestion.value寻找带有name=textQuestion的元素，该元素不存在。改用getElementById或添加name属性（需要在服务器端使用输入值）。

function equal() {
    if (document.getElementById('textQuestion').value != document.getElementById('textAnswer').value) {
        life--; // life is undefined
    }
}

// don't forget to call `equal` and other functions.

Answer 2

对于您要实现的目标，我将进行更多修复和补充。

首先，您需要一个 QA 机制来存储问题和正确答案。在这种情况下，对象文字似乎很完美：{q: "", a:""}。

您需要存储当前的骰子编号，以便可以在需要时重复使用（请参见qa_curr变量）

比您可以检查的用户修剪的答案等于QA.a

示例：

let life = 10,
  qa_curr = 0;
const EL = sel => document.querySelector(sel),
  el_question = EL("#question"),
  el_answer = EL("#answer"),
  el_check = EL("#check"),
  el_lives = EL("#lives"),
  qa = [{
    q: "Calculate 10 / 2", // Question
    a: "5", // Answer
  }, {
    q: "What's the result of 5 x 5",
    a: "25"
  }, {
    q: "5 - 6",
    a: "-1"
  }, {
    q: "Subtract 20 from 70",
    a: "-50"
  }];

function rollDice() {
  qa_curr = ~~(Math.random() * qa.length);
  el_question.textContent = qa[qa_curr].q;
  el_lives.textContent = life;
}

function checkAnswer() {
  const resp = el_answer.value.trim(),
    is_equal = qa[qa_curr].a === el_answer.value;
  let msg = "";

  if (resp === '') return alert('Enter your answer!'); 

  if (is_equal) {
    msg += `CORRECT! ${qa[qa_curr].q} equals ${resp}`;
    rollDice();
  } else {
    msg += `NOT CORRECT! ${qa[qa_curr].q} does not equals ${resp}`;
    life--;
  }
  if (life) {
    msg += `\nLives: ${life}`
  } else {
    msg += `\nGAME OVER. No more lifes left!`
  }
  // Show result msg
  el_answer.value = '';
  alert(msg);
}

el_check.addEventListener('click', checkAnswer);

// Start game
rollDice();

<span id="question"></span><br>
<input id="answer" placeholder="Your answer">
<input id="check" type="button" value="Check"> (Lives:<span id="lives"></span>)

以上内容仍然遗漏了不重复问题的逻辑，至少不会造成混乱:)，但希望这会为您提供一个良好的开端。

Answer 3

这可能是您要寻找的。我只是根据随机输入和用户输入之间的匹配来alert(true || false )。检查代码段中的功能并进行相应评论。

var numArray = ["10/2", "5x5", "12-22", "5-6", "20-70"];
var questionElement = document.getElementById("textQuestion");
var answerElement = document.getElementById("textAnswer");

function rollDice() {
  var question = numArray[Math.floor(Math.random() * numArray.length)];
  questionElement.setAttribute("value", question);
}

//rolldice() so that the user can see the question to answer
rollDice();

function equal() 
{
  var dif = eval(questionElement.value); //get the random equation and evaluate the answer before comparing
  var answer = Number(answerElement.value); //get the answer from unser input
  var result = false; //set match to false initially
  if(dif === answer){
    result =  true; //if match confirmed return true
  }
  
  //alert the match result
  alert(result);
  
}

document.getElementById("start").addEventListener
(
  "click",
  function()
  {
    equal();
  }
);

<input type="textview" id="textQuestion" value="">
<br>
<textarea id="textAnswer" form="post" placeholder="Answer"></textarea>

<input type="button" id="start" value="Start">

如何比较两个文本输入值？

3 个答案: