Javascript Multiplication table

Crimmm

09-14-2011, 01:32 AM

I am trying to allow the user to type in two numbers and then a multiplication table pops up below it. It works however I cannot figure out how to make the first row be 0,1,2,3,4,5..ect and same for the first column in each row going down the table. Here is my code..

<html>
<head>
<title>Untitled</title>

<script>
function f(x,y)
{

if((x < 3) || (y < 3) || (x > 10) || (y > 10)){
alert("Please enter numbers between 3 and 7")
}else{

s = "<table border = '1'>"
var total;

for (i=0; i<=x; i++){
s+= "<tr></tr>";

for (j=0; j <= y; j++){

total = i * j;
s+="<td>"+ total +"</td>"
}
}
s+="</table>"
document.getElementById("Q").innerHTML+=s

}
}
</script>

</head>
<body>

[enter a number between 3 and 10]
<form id = "form1">

<input id = "a" value = "6"> by <input id = "b" value = "8"><br>
<input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
<br>
</form>

<div id = "Q"></div>

</body>
</html>

jmrker

09-14-2011, 02:11 AM

I'm not sure I understand, but this is my guess as to what you are trying to accomplish: :confused:
Found some typo errors...

<html>
<head>
<title> Dynamic Multiplication Table </title>
<script type="text/javascript">
function f(x,y) {
if((x < 3) || (y < 3) || (x > 10) || (y > 10)) {
alert("Please enter numbers between 3 and 10 (inclusive)");
} else {
s = "<table border = '1'>";
var total;
for (i=1; i<=x; i++) {
s+= "<tr></tr>";
for (j=1; j <= y; j++) {
total = i * j;
s+="<td align='right'>"+ total +"</td>";
}
}
s+="</table>";
document.getElementById("Q").innerHTML = s;
}
}
</script>
</head>
<body>

[enter a number between 3 and 10 inclusive]
<form id = "form1" onsubmt="return false">
<input id = "a" value = "6"> by <input id = "b" value = "8"><br>
<input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
<br>
</form>
<div id = "Q"></div>
</body>
</html>

Crimmm

09-14-2011, 03:07 AM

This is not quiet what i am stuck with. If you run the code you see a row and column of all 0's. I want them to be 0-10 both vertical and horizontal if the user types in 10 in each input box

DaveyErwin

09-14-2011, 03:59 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">
function f(x,y){
if((x < 3) || (y < 3) || (x > 10) || (y > 10)){
alert("Please enter numbers between 3 and 7")
}else{
var s = "<table border = '1'>\n"
var total;
for (var i=0; i<=x; i++){
s+= "<tr>";
for (var j=0; j <= y; j++){
if(!(total = i * j))total = i;
//if the product of i * j is zero use the value of i instead
if(!total)total=j;
//if the value of i is zero use the value of j instead
//if both i and j are both zero use zero (upper left corner)
s+="<td>"+ total + "</td>";
}
s+="</tr>\n";
}
s+="</table>"
document.getElementById("Q").innerHTML=s
}
}
</script>
</head>
<body>
<p>[enter a number between 3 and 10]</p>
<form id = "form1" action="" onsubmit="return false;"><p>
<input id = "a" value = "6"> by <input id = "b" value = "8"><br>
<input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
</p>
</form>
<div id = "Q"></div></body></html>

This will not work with negative numbers!