I need help with this html assignment Exercise 6.2 Write a JavaScript program wh
ID: 3736590 • Letter: I
Question
I need help with this html assignment
Exercise 6.2 Write a JavaScript program which will output a form as the following. When the use click on button Total the sum of these five values will show up on the field next to button Total Sum of five numbers in a Form First Number 5 Second Number 4 Third Number 3 Fourth Number 2 Fifth Number 100 Total After all five numbers entered and Total clicked. Sum of five numbers in a Fornm First Number 5 Second Number4 Third Number Fourth Number 2 Fifth Number 100 Total 114Explanation / Answer
Here is html code that contains javascript code
Create a file total.html and put below code in that file and open that html file
--------------------------------------------------------
<body>
</body>
<script>
function createTable(){
var div = document.createElement('div');
div.setAttribute("id", "tbl");
document.body.appendChild(div)
document.getElementById("tbl").innerHTML = "<table id='number_table' border = '1'>" +
'<tr>' +
'<td>First Number</td>' +
'<td><input type="text"/></td>' +
'</tr>' +
'<tr>' +
'<td>Second Number</td>' +
'<td><input type="text"/></td>' +
'</tr>' +
'<tr>' +
'<td>Third Number</td>' +
'<td><input type="text"/></td>' +
'</tr>'+
'<tr>' +
'<td>Fourth Number</td>' +
'<td><input type="text"/></td>' +
'</tr>'+
'<tr>' +
'<td>Fifth Number</td>' +
'<td><input type="text"/></td>' +
'</tr>'
};
createTable();
function getColumnSum(table_id, col) {
var tab = document.getElementById(table_id);
var n = tab.rows.length;
var i, s = null, tr, td;
var sum = 0;
// First check that col is not less then 0
if (col < 0) {
return null;
}
for (i = 0; i < n; i++) {
tr = tab.rows[i];
if (tr.cells.length > col) { // Check that cell exists before you try
td = tr.cells[col]; // to access it.
s += parseInt(td.children[0].value,10);
} // Here you could say else { return null; } if you want it to fail
// when requested column is out of bounds. It depends.
}
return s;
}
var br = document.createElement('br');
document.body.appendChild(br);
var btn = document.createElement('button');
btn.innerHTML = "Total";
document.body.appendChild(btn);
var span = document.createElement('span');
span.innerHTML = " "
document.body.appendChild(span);
var sum = document.createElement('input');
document.body.appendChild(sum);
function total() {
var total = getColumnSum('number_table', 1);
sum.value = total;
}
btn.addEventListener("click", total, true);
</script>