CODEWITHSUNDEEP
javascripthtmlcss
Extraextra
Extraextra

Reputation: 11

How can I make my button compare the users answer with a "correct" answer?

I'm trying to make my first input field automatically display a random multiplication sum, the user should then answer that sum in the second input field. Then when the user would click the button "check my answer", and a pop-up window.alert would appear saying either "You did it" or "Wrong!" etc. Plus, for some reason, when I delete that empty function, my multiplication sums stop working! Can anyone shed some light?

Here's my code:

var x = Math.floor(Math.random() * 12) + 1;
var y = Math.floor(Math.random() * 12) + 1;


function genQuestion() {
    var Question = x + " times " + y;
    document.getElementById("inputVal").value = Question;
    return Question;
}

function genAnswer() {
    answer = x * y;
    return answer;
}

window.onload = genQuestion;

function buttonPressed() {
    var userAnswer = document.getElementById("outputVal").value;
    if (answer === userAnswer) {
        alert("Correct- Well Done!");
    }
    else {
        alert("Wrong- Please try again!");
    }
}

function d() {
}
<h1>Learn to Multiply Website</h1>

<form name="myForm" id="myForm" action="#">
    <label>What is</label>
    <input id="inputVal" name="inputVal" type="text"/>
    <br>

    <label>The answer is</label>
    <input name="outputVal" id="outputVal" type="text"/>
    <br>

    <button class="button" onclick="buttonPressed()">Check my Answer</button>

</form>

Upvotes: 1

Views: 56

Answers (2)

Dani Sh90
Dani Sh90

Reputation: 176

Your if statement is invalid:

function buttonPressed() {
var userAnswer = document.getElementById("outputVal").value;
if (answer === userAnswer) {
    alert("Correct- Well Done!");
}

Because "answer" is not a variable, it's a value returned by the function "genAnswer".

So your "if" statement should go like this:

If(genAnswer() == userAnswer){}

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

You are using answer which in not declared.

You can directly call you answer function to genAnswer to compare with question

changed === to == for automatic type conversion.

Updated code

var x = Math.floor(Math.random() * 12) + 1;
var y = Math.floor(Math.random() * 12) + 1;


function genQuestion() {
  var Question = x + " times " + y;
  document.getElementById("inputVal").value = Question;
  return Question;
}

function genAnswer() {
  answer= x * y;
  return answer;
}

window.onload = genQuestion;

function buttonPressed(){
  var userAnswer = document.getElementById("outputVal").value;
  if (userAnswer == genAnswer()){
    alert("Correct- Well Done!");
  }
  else {alert("Wrong- Please try again!");}
}

function d(){}
<h1>Learn to Multiply Website</h1>

    <form name="myForm" id="myForm" action="#">
        <label>What is</label>
        <input id="inputVal" name="inputVal" type="text" />
        <br>

        <label>The answer is</label>
        <input name="outputVal" id="outputVal" type="text" />
        <br>
        
        <button class = "button" onclick="buttonPressed()">Check my Answer</button>
        
    </form>

Upvotes: 1

Related Questions