Need help with creating multiplication table

noobatjavascrip · 10-12-2012, 05:10 AM

Ok so this is hw.... im not looking for the answer just help because I am stuck and have been stuck for a while

I had to create 3 different multiplication tables... 1 using document.write,1 using innerHTML, and 1 Using dom methods.

I am having troubles with dom methods.

I need my dom function to produce an output just like the innerHTML and document.write function.

So if someone could help me that would be great

Heres my code...

<html>
<head>
<title>*** 5</title>
<script>
function dwrite(r,c){

document.write("<html><body><table border='1'>")

for (i=1;i<=r;i++){
document.write("<tr>")
document.write("<td bgcolor='#ccffff'>"+(i)+"</td>")

for (j=1;j<=c;j++){

document.write("<td>"+(j)*(i)+"</td>")

}

document.write("</tr>")

}

document.write("</table></body></html>")

}
function multiplier(r,c){
I=document.getElementById('Table')
var x = '';
x += '<table border="1">';

for (var i=1; i<=r; i++) {
x += '<tr>'
x += '<td>'+(i)+'</td>'

for (var j=1;j<=c;j++){
x +='<td>'+(j)*(i)+'</td>';

}
x += '</tr>'
}
x += '</table>';
I.innerHTML = 'Times Table'+x;
}

function DOM(r,c){
//H=document.getElementById('Q.value')
D=document.getElementById('Table')
var T=document.createElement("table")
T.setAttribute("border",1)
var B=document.createElement("tbody")
T.appendChild(B)
var R=document.createElement("tr")
B.appendChild(R)

for (var i=1;i<=7;i++){

var C=document.createElement("td")
R.appendChild(C)
b=document.createTextNode(i)
C.appendChild(b)

}

for (var j=1;j<=7;j++){
var C=document.createElement("td")
R.appendChild(C)
g=document.createTextNode(j)
C.appendChild(g)

}

D.appendChild(T)

}

</script>
</head>
<body>
<h1>Times Table</h1>
<h3>(Enter Numbers between 10 and 5)</h3>
<form>
rows<input id="Q" size="2" value=7>by
columns<input id="P" size="2" value=7><br>

<input type="button"
value="document.write"
onclick="dwrite(Q.value,P.value)">

<input type="button"
value="innerHTML"
onclick="multiplier(Q.value,P.value)">

<input type="button"
value="DOM"
onclick="DOM(Table)">

</form>

<div id="Table">Times Table</div>
</body>
</html>

Goos · 10-13-2012, 02:32 PM

Just like your other two functions, you'll need to use nested loops for your DOM function.
Something that needs some attention aswell is:

Code:

function DOM(r,c)
...
<input type="button" value="DOM" onclick="DOM(Table)">

Furthermore you should take a look at your variable declerations aswell. You're creating alot of global variables, where you should use locals.
Using more descriptive variable names will make your code easier to read. It's a bit more typing, but if you use alot of variables it might get hard to remember the difference between a lower- and a uppercase 'r'.

In the 'dwrite' function, for(i=1;i<=r;i++) will create variable 'i' in the global scope. In the 'multiplier' you do it right, using the 'var' keyword.
In the 'multiplier' function, r, c, x, i, j are declared local. But you don't declare 'I' as a local variable, so 'I' becomes unnecessary a global.
In the DOM you create alot of global variable, which should be local variable aswell.