JavaScript Multiplication Game
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();
&l开发者_Python百科t;/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>
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>
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.
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>
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:
- Learn about parseInt
- Why not to use document.write
- The proper way to attach event handlers
Try it out!
加载中,请稍侯......
精彩评论