Please help with the following exercise: Create a new file jsDemo7.html with HTM
ID: 3692270 • Letter: P
Question
Please help with the following exercise:
Create a new file jsDemo7.html with HTML and JavaScript code that provides the fol- lowing functionality. Initially, the page shows the user a two-dimensional table with 3 columns and 3 rows where every cell of the table contains the number zero. Below the table should be a clickable HTML element with the label ‘Calculate’.
Whenever the user clicks on a cell, the number currently in the cell is replaced by a new random number between 1 and 9.
If the user clicks on ‘Calculate’ a message box will be shown with the message ‘The sum of all the numbers on the board is X’ where X is the sum of all the numbers currently in the cells of the table.
Many thanks! :)
Explanation / Answer
Please follow the code and comments for the description of the code :
CODE :
<html>
<body>
<p>Click the button to calculate x.</p>
<br/>Enter first number :
<input type="text" id="txt1" value="0" name="text1">
Enter second number :
<input type="text" id="txt2" value="0" name="text2"><br/><br/>
Enter third number :
<input type="text" id="txt3" value="0" name="text3">
Enter fourth number :
<input type="text" id="txt4" value="0" name="text4"><br/><br/>
Enter fifth number :
<input type="text" id="txt5" value="0" name="text5">
Enter sixth number :
<input type="text" id="txt6" value="0" name="text6"><br/><br/>
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value = Math.floor(Math.random() * 10);
var z=document.getElementById("txt2").value= Math.floor(Math.random() * 10);
var m=document.getElementById("txt3").value= Math.floor(Math.random() * 10);
var n = document.getElementById("txt4").value= Math.floor(Math.random() * 10);
var p=document.getElementById("txt5").value= Math.floor(Math.random() * 10);
var q = document.getElementById("txt6").value= Math.floor(Math.random() * 10);
var x = +y + +z + +m + +n + +p + +q;
document.getElementById("demo").innerHTML = x;
}
</script>
<button>Calculate</button>
<br/>
</body>
</html>
Hope this is helpful.