...

View Full Version : Help with multiplication tables



lorry28
07-16-2004, 11:10 PM
I am trying to create a javascript code that performs the following tasks for my childern:

1)prompts the user to enter a value between 1 and 12 (inclusive)

2) if the value falls outside of this range eg 13 then an alert box displays a message.

3)on entry of the correct value (1 to 12) the user should be presented with a multiplication table showing their input value multiplied between 1 and 12 times.

4)this multiplication table should be displayed in a html table with 13 rows and five columns, the first row should contain a suitable heading which includes the input value in merged fields; the five columns should contain the multiplying value (from 1 to 12), the word "times", the input value, the word "equals" and finally the result.

5)the table header should have a light gray background with lines of the multiplication table having alternately light blue and light yellow backgrounds.

Can any body help as I'm new to javascript and getting lost fast.

dumpfi
07-17-2004, 12:49 AM
Maybe this helps:

<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>dumpfi

Willy Duitt
07-17-2004, 10:56 AM
Nice script dumfi but the numerous required specifics makes this seems more like a homework assignment and your use of the DOM is more than likely much to advanced....

Anyway, this question was also answered here (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=39670).....

.....Willy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum