Page Refreshes even with a return false
I am working on a simple HTML5 canvas exercise and ran into a bit of a
snag. I cannot get the page to stop refreshing even after a return false
in the checkAnswer function. I have searched high and low for the answer
and have tried a few different things, but nothing seems to work. Any
assistance would be greatly appreciated. I have created a JSFiddle here
http://jsfiddle.net/geekch1ck/ezSyf/
I also don't understand the "{"error": "Please use POST request"}" on
JSFiddle.
Thank you in advance for your help. I'm sure I'm missing something rather
simple, but I can't find it in any of the books or sites I've combed over.
Here is the code for those who don't want to mess with JSFiddle
function getRandInt (min, max){
return Math.floor(Math.random()*(max-min+1)) + min;
}
function checkAnswer(guess, answer){
if (guess == answer){
alert("Correct");
setTimeout(drawText(equation),3000);
return true;
}
else{
alert("Try Again");
return false;
}
}
function drawCanvas(equation){
//draw the Canvas
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
drawText(equation);
}
function drawText(equation){
//add the text to the canvas
context.font = '40pt Veranda';
context.fillText(equation, 50, 100);
}
$(document).ready(function(){
drawCanvas(equation);
$("form").submit(function(){
guess = document.getElementById("guess").value;
checkAnswer(guess, answer);
});
});
</script>
</head>
<body>
<canvas id = "myCanvas" width = "200" height = "200" style =
"border:1px solid #000000;">
</canvas>
<form action="">
<p>What is the answer? <input type = "text" id = "guess" name = "guess"></p>
</form>
</body>
</html>
No comments:
Post a Comment