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

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

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

首先，您需要一个质量检查机制来存储问题和正确答案。 在这种情况下，对象文字似乎很完美： {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">