JavaScript Multiplication Game

Question

I am supposed to make this simple program. It produces a multiplication problem, and when the user types the correct answer, it is supposed to produce another question. Instead it goes into an infinite loop and never stops, the answer field and the button go away. Also, I am supposed to make the comment about the users answer, one of 4 different sayings. Without using Arrays how would I do that?

My professor is no help, really getting aggravated as I have no where else to turn.

<html>
    <title>HW 9.27 and 9.28</title>
    <head>
        <script type="text/javascript">
            var number1;
            var number2;
            var answer3;
            var answer2;

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

            function answer1() {
                var statusDiv = document.getElementById("status");
                answer3 = document.getElementById("answer").value;

                if (answer3 != answer2) statusDiv.innerHTML = "No. Please try again";
                else if (answer3 == answer2) {
                    statusDiv.innerHTML = "Very good!";
                    problem();
                }
            }
            problem();

        </script>
    </head>
    <body>
        <form>
            <input id="answer" type="text" />
            <input type="button" value="Solve!" onclick="answer1()" />
            <div id ="status">Click the Solve button to Solve the problem</div>
        </form>
    </body>
</html>

I think the last `problem()` might be creating the loop. Also, please clarify what the question is in the title. "Javacript Question" is very uninformative. — Hanna, Feb 17 '11 at 23:19
What makes you think it is in an infinite loop? Unless there is more code to this I don't see how it would. — JohnFx, Feb 17 '11 at 23:21
That is my problem. I would like it to run the problem() function after the user gets the correct answer. However, at least in Firefox it changes the problem like I want it too, but all of the
stuff was non existent. I assume it is an infinite loop because Firefox will just load, and load, and load. — Craig, Feb 18 '11 at 05:30

score 2 · Answer 1 · answered Feb 17 '11 at 23:21

simply put, document.writeln("How much is " + number1 + " times " + number2 + " ?"); erases all content on the then writes the string. So you're loosing all your form inputs.

The reason it doesn't happen on the initial page load is because the call to document.writeln happens before the form elements load.

Try this:

<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;

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

function answer1()
{
var statusDiv = document.getElementById("status");
answer3=document.getElementById("answer").value;

if(answer3 != answer2)
statusDiv.innerHTML="No. Please try again";
else
if (answer3==answer2)
{
statusDiv.innerHTML="Very good!";
problem();
}}


</script>
</head>
<body onload="problem();">
<form>
<div id ="prompt"></div>
<input id="answer" type="text" />
<input type="button" value="Solve!" onclick="answer1()" />
<div id ="status">Click the Solve button to Solve the problem</div>
</form>
</body>
</html>

score 1 · Answer 2 · answered Feb 17 '11 at 23:21

1

There is no infinite loop, but document.writeln causes problems.

I suggest you set the question the same way as you set the other messages.

answered Feb 17 '11 at 23:21

Felix Kling

705,106
160
1,004
1,072

score 1 · Answer 3 · answered Feb 17 '11 at 23:21

I think the problem is with the document.writeln. You have a div for the question instead and then assing the question as innerHTMl to that div.

Try this:

<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;

function problem()
{
    number1 = Math.floor( 1 + Math.random() * 9 );
    number2 = Math.floor( 1 + Math.random() * 9 );
    var question = document.getElementById("question");
    question.innerHTML = "How much is " + number1 + " times " + number2 + " ?";
    answer2 = (number1*number2);
}

function answer1()
{
    var statusDiv = document.getElementById("status");
    answer3=document.getElementById("answer").value;

    if(answer3 != answer2)
    statusDiv.innerHTML="No. Please try again";
    else
    if (answer3==answer2)
    {
        statusDiv.innerHTML="Very good!";
        document.getElementById("answer").value = "";
        problem();
    }
}
</script>
</head>
<body>
<form>
    <div id ="question"></div>
    <input id="answer" type="text" />
    <input type="button" value="Solve!" onclick="answer1()" />
    <div id ="status">Click the Solve button to Solve the problem</div>
</form>
<script type="text/javascript">
    problem();
</script>
</body>
</html>

score 0 · Answer 4 · edited May 23 '17 at 10:28

You have a few issues:

First of all when you click the Solve button your answer1 function is not getting called. I recommend not using onclick in HTML, but adding:

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

to your JavaScript.

Also, you're comparing String input to a number. That's not going to work. You need to convert the input to a Number. Use parseInt(answer3,10) the 10 means base 10, and will make sure that 06 is interpreted as 6 instead of as an octal.

Also I would not use if and then else if. Just use if and then else so:

if (parseInt(answer3,10) === answer2){
        //got it right!
     }
    else {
        ///got it wrong
    }

Also don't use document.writeln. It's erasing stuff on your page. Create a div: <div id="problem"></div> and fill it with:

problemDiv.innerHTML = "How much is " + number1 + " times " + number2 + " ?";

You should also rename your variables. Your variable names are ambiguous.

Good luck!

Stuff to read:

Try it out!

I agree with number parsing but why is `answer1()` not called when the button is clicked? It worked for me. — Felix Kling, Feb 18 '11 at 00:02

JavaScript Multiplication Game

4 Answers4