CS101 Introduction to Computing Assignment No. 4 Semester Spring June 2012

[Vuhelper]

Solution:


<html>
<head>
<script type="text/javascript">
function multi() {
var par_elem = document.getElementById("table");
while(par_elem.childNodes.length) {
par_elem.removeChild(par_elem.childNodes[0]);
}
var input = 0.5;
while(input < 1 || input > 12 || parseInt(input) != input) {
if(input_str === null) {
create_button();
return;
}
var error = (typeof(input_str) != "undefined") ? "Your input is not a value between 1 and 12 or is not an integer. Try again.\n" : "";
var input_str = window.prompt(error + "Enter a value between 1 and 12 (inclusive, integer only)", "");
var input = new Number(input_str);
}
var table = document.createElement("table");
table.style.border = "1px solid #000000";
table.style.borderCollapse = "collapse";
var hrow = document.createElement("tr");
var heading = document.createElement("td");
heading.colSpan = 5;
heading.style.backgroundColor = "#C0C0C0";
heading.appendChild(document.createTextNode("multiplication table for: " + input));
hrow.appendChild(heading);
table.appendChild(hrow);
for(var i = 1; i < 13; i++) {
var color = (i / 2 == Math.floor(i / 2)) ? "#E0E0FF" : "#F0F000";
var tr = document.createElement("tr");
var value = document.createElement("td");
value.style.backgroundColor = color;
value.appendChild(document.createTextNode(i));
var times = document.createElement("td");
times.style.backgroundColor = color;
times.appendChild(document.createTextNode("times"));
var inp_cell = document.createElement("td");
inp_cell.style.backgroundColor = color;
inp_cell.appendChild(document.createTextNode(input));
var equals = document.createElement("td");
equals.style.backgroundColor = color;
equals.appendChild(document.createTextNode("equals"));
var result = document.createElement("td");
result.style.backgroundColor = color;
result.appendChild(document.createTextNode(i * input));
tr.appendChild(value);
tr.appendChild(times);
tr.appendChild(inp_cell);
tr.appendChild(equals);
tr.appendChild(result);
table.appendChild(tr);
}
par_elem.appendChild(table);
if(document.all && !window.opera) par_elem.innerHTML = par_elem.innerHTML;
create_button();
}
function create_button() {
var ie = (document.all && !window.opera);
if(ie) var button = document.createElement("<input type='button' value='new multiplication table'>");
else {
var button = document.createElement("input");
button.type = "button";
button.value = "new multiplication table";
}
button.onclick = multi;
document.getElementById("table").appendChild(button);
}
window.onload = multi;
</script>
</head>
<body>
<div id="table"></div>
</body>
</html>