I'm fiddling with javascript to get the hang of it. I am trying to built an x by x grid programatically--which I'll eventually try to get to be minesweeper. I have a function to write a single row with x entries. I have another function that loops, calling the single row function x times. The idea is that by calling the row function x times, I'll get an x by x grid. But in my current code, the looping function is calling the single line function 1 time and I can't figure out why. When I use alerts to count iterations, the loop fires five times--but not when the writeOneRow function is included. I get the same behavior in IE and Chrome. Can anyone point out my (likely bonehead) error:
<html>
<body>
<script type="text/JavaScript">
function writeRows(loop) {
for (i=0;i<loop;i++){
writeOneRow(loop); //this is only called once. Why?
}
}
function writeOneRow(num) {
var b = "<Div style='float:left; border-style:solid; margin:10px'> Test </div>"
var string =""
for (i=0;i<num;i++){
string= string+ b ;
}
var line = document.createElement('div');
line.innerHTML = string ;
document.body.appendChild(line);
}
</script>
<a href="#" onclick="javascript:writeRows(5);return false;">InsertRow</a>
</body>
</html>
I'm fiddling with javascript to get the hang of it. I am trying to built an x by x grid programatically--which I'll eventually try to get to be minesweeper. I have a function to write a single row with x entries. I have another function that loops, calling the single row function x times. The idea is that by calling the row function x times, I'll get an x by x grid. But in my current code, the looping function is calling the single line function 1 time and I can't figure out why. When I use alerts to count iterations, the loop fires five times--but not when the writeOneRow function is included. I get the same behavior in IE and Chrome. Can anyone point out my (likely bonehead) error:
<html>
<body>
<script type="text/JavaScript">
function writeRows(loop) {
for (i=0;i<loop;i++){
writeOneRow(loop); //this is only called once. Why?
}
}
function writeOneRow(num) {
var b = "<Div style='float:left; border-style:solid; margin:10px'> Test </div>"
var string =""
for (i=0;i<num;i++){
string= string+ b ;
}
var line = document.createElement('div');
line.innerHTML = string ;
document.body.appendChild(line);
}
</script>
<a href="#" onclick="javascript:writeRows(5);return false;">InsertRow</a>
</body>
</html>
3 Answers
Reset to default 7Your variable i is a global. Use var to make them local.
for (var i=0;i<num;i++){
...
for (var i=0;i<num;i++){
My JavaScript is a bit rusty, but you never declare i as a local variable, so I think both for loops are modifying the same i and thus it hits 5 inside the second function and the first loop only runs once.
Try adding var i; in both your functions before the for loops and that will create a local variable in each case and should fix the problem. Cheers!
I'm not sure if I understood you correctly, but this could help...
Change the line:
line.innerHTML = string ;
To:
line.innerHTML = line.innerHTML + string;
Than you won't need the second for loop anymore you could just do:
var string = b;