JSFiddle - React, Tailwind, and code Playground

by adamzr

HTML

<html>
    <title>HW 9.27 and 9.28</title>
    <head>
    </head>
    <body>
        <form>
            <div id="problem"></div>
            <input id="answer" type="number" />
            <input type="button" value="Solve!" id="solve"/>
            <div id ="status">Click the Solve button to Solve the problem</div>
        </form>
    </body>
</html>

JavaScript

var number1;
var number2;
var userAnswer;
var actualAnswer;

var problemDiv = document.getElementById("problem");
var statusDiv = document.getElementById("status");
var answer = document.getElementById("answer");



function problem() {
    number1 = Math.floor(1 + Math.random() * 9);
    number2 = Math.floor(1 + Math.random() * 9);
    problemDiv.innerHTML = "How much is " + number1 + " times " + number2 + " ?";
    actualAnswer = (number1 * number2);
}

function answer1() {

    userAnswer= answer.value;
    answer.value = "";
    if (parseInt(userAnswer,10) === actualAnswer){
        statusDiv.innerHTML = "Very good!";
        problem();
     }
    else {
        statusDiv.innerHTML = "No. Please try again";
    }
}

document.getElementById("solve").onclick = answer1;
problem();