I need help with this, it must be done in JavaScript A. Place the numbers 1-16 r
ID: 3675744 • Letter: I
Question
I need help with this, it must be done in JavaScript
A. Place the numbers 1-16 randomly into a 4x4 grid, but make them invisible.
Use the DOM to make them invisible.
B. Generate a random number from 1 to 16. Make that number the "target" or "secret" number, and TELL WHAT IT IS.
C. Each time the visitor clicks on a square use the DOM to make the number in that square visible.
When (s)he lets up on the mouse, use the DOM to make the number invisible again.
D. When the visitor clicks on the square that contains the target number, (s)he wins and the game is over.
1. Use the DOM to make the winning number (or better, all numbers) visible.
2. announce the number of tries.
E. Ask to play again. (Yes or No)
F. Include a "Start Over" button that works without refreshing the page.
G. Include an "End This" button that makes all numbers visible, so the next click can end the game.
Explanation / Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script Language="javascript">
var arr = [];
var count;
var numToGuess;
function showall()
{
for(i=0;i<=15;i++)
{
n=i+1;
id='b'+n;
document.getElementById(id).innerHTML = arr[i];
document.getElementById(id).style.color = "#000000";
}
}
function rnd() // generate 16 unique numbers
{
count=0;
while(arr.length < 16)
{
var randomnumber=Math.ceil(Math.random()*16)
var found=false;
for(var i=0;i<arr.length;i++)
{
if(arr[i]==randomnumber){found=true;break}
}
if(!found)arr[arr.length]=randomnumber;
}
for(i=0;i<=15;i++)
{
n=i+1;
id='b'+n;
document.getElementById(id).innerHTML = arr[i];
document.getElementById(id).style.color = "#ffffff";
}
m=Math.ceil(Math.random()*15);
numToGuess=arr[m];
alert("You Have 5 clicks to try");
}
function show(id1)
{
var n;
if(count<6)
{
alert(document.getElementById(id1).innerHTML);
document.getElementById(id1).style.color= "#0000000";
if(numToGuess==document.getElementById(id1).innerHTML)
{
alert ("You Win the Game");
}
count=count+1;
}
else
{
showall()
alert("You Loss Out Clicks Number is " +numToGuess);
if(confirm("Want to play Again "))
{
count=0;
rnd();
}
}
}
function hide(id1)
{
document.getElementById(id1).style.color= "#ffffff";
}
</script>
<body>
<table border="1" align="center">
<form name="frm">
<tr>
<td width="58" id="b1"> </td>
<td width="52" id="b2"></td>
<td width="52" id="b3" ></td>
<td width="68" id="b4"></td>
</tr>
<tr>
<td width="58" id="b5"> </td>
<td width="52" id="b6" ></td>
<td width="52" id="b7" ></td>
<td width="68" id="b8"></td>
</tr>
<tr>
<td width="58" id="b9" ></td>
<td width="52" id="b10"></td>
<td width="52" id="b11" ></td>
<td width="68" id="b12"></td>
</tr>
<tr>
<td width="58" id="b13"> </td>
<td width="52" id="b14"></td>
<td width="52" id="b15"> </td>
<td width="68" id="b16"></td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="button" value="Start Over" name="btn1"/>
</td>
<td colspan="2" align="center"> <input type="button" value="End This" name="btn2"/>
</td>
</tr>
</form>
</table>
</body>
</html>