I have a div image and I need it to show up after an alert message pops-up but I don't know how to do it. Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Midterm</title>
<script language="javascript">
var num1, num2;
function game()
{
num1 = Math.floor(Math.random() *12)
//document.write(num1 + "</br>");
document.getElementById("num1").innerHTML=num1;
num2 = Math.floor(Math.random() *12)
//document.write(num2 + "</br>");
document.getElementById("num2").innerHTML=num2;
}
function enter()
{
var answer = document.getElementById("answer").value;
alert("You entered in " + answer);
if ((num1 + num2) != answer)
{
alert("Sorry, that is incorrect.");
document.getElementById("frown").innerHTML=wrong;
}
else
{
alert("That is correct! Great Job!");
document.getElementById("smile").innerHTML=right;
}
}
</script>
<style type="text/css">
<!--
.center {
text-align: center;
}
#problem {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
-->
</style>
</head>
<body>
<table width="500" border="1">
<tr>
<td height="276"><h1 class="center">Flash Magic!</h1>
<p>
<input type="button" name="game" id="game" value="Start New Game" onclick="game()" />
</p>
<div id="problem">
<div id="num1">6</div>
+<span id="num2">4</span>
</div>
<hr align="left" width="300" />
<p>
<input type="text" name="answer" id="answer" />
</p>
<p>*</p>
<p>*</p>
<input type="button" name="enter" id="enter" value="Submit Answer" onclick="enter()" />
<p>*</p>
<div id="wrong"><img src="smiley.jpg" id="smile" onclick="enter()" /></div>
<p>*</p>
<div id="right"><img src="frowny.jpg" id="frown" onclick="enter()" /></div></td>
</tr>
</table>
<h1>*</h1>
<h1>*</h1>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Midterm</title>
<script language="javascript">
var num1, num2;
function game()
{
num1 = Math.floor(Math.random() *12)
//document.write(num1 + "</br>");
document.getElementById("num1").innerHTML=num1;
num2 = Math.floor(Math.random() *12)
//document.write(num2 + "</br>");
document.getElementById("num2").innerHTML=num2;
}
function enter()
{
var answer = document.getElementById("answer").value;
alert("You entered in " + answer);
if ((num1 + num2) != answer)
{
alert("Sorry, that is incorrect.");
document.getElementById("frown").innerHTML=wrong;
}
else
{
alert("That is correct! Great Job!");
document.getElementById("smile").innerHTML=right;
}
}
</script>
<style type="text/css">
<!--
.center {
text-align: center;
}
#problem {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
-->
</style>
</head>
<body>
<table width="500" border="1">
<tr>
<td height="276"><h1 class="center">Flash Magic!</h1>
<p>
<input type="button" name="game" id="game" value="Start New Game" onclick="game()" />
</p>
<div id="problem">
<div id="num1">6</div>
+<span id="num2">4</span>
</div>
<hr align="left" width="300" />
<p>
<input type="text" name="answer" id="answer" />
</p>
<p>*</p>
<p>*</p>
<input type="button" name="enter" id="enter" value="Submit Answer" onclick="enter()" />
<p>*</p>
<div id="wrong"><img src="smiley.jpg" id="smile" onclick="enter()" /></div>
<p>*</p>
<div id="right"><img src="frowny.jpg" id="frown" onclick="enter()" /></div></td>
</tr>
</table>
<h1>*</h1>
<h1>*</h1>
</body>
</html>