Mr.Toxy Mr.Toxy - 16 days ago 5
HTML Question

Javascript function isn't changing the name attribute of an html document as it should

I am building a simple minesweeper game for the first JavaScript project.
What I need to do in the game is that it randomly creates a map,that is randomly assigning a name (1,2,4 if it's terrain and x if it's a bomb) to an html element via a JavaScript function.

I have searched a lot and found out how to actually set the name attribute and further print it out using

appendText
to the
<td>
of the table (I think
innerHTML
would also work fine).

My problem is that the array is actually being randomly sorted out but when I go through that array (after sorting it) in order to set the name for the hmlt element by ID like this
document.getElementById(id).setAttribute("name","something")
it doesn't work.
But as far as I can see, since I can't debug, the array is being sorted out correctly. (Im developing with atom) I really don't understand why the code isn't working as it should be.

I have created a button that calls a function to create that random map like this:

<button type="button" onclick="shuffle();">Start The game!</button>

<script type="text/javascript">
//Randomly sorts the array called numbers
function shuffle()
{
var numbers = [1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,'x','x','x','x',2,2,2,2,2,1,1,2,2];
for (var i = numbers.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = numbers[i];
numbers[i] = numbers[j];
numbers[j] = temp;
}

//The code below doesn't actually change the name of the element as far as I'm aware, but I can't understand why.
//It should be working and I can't figure out why.
for(var idx = 1; idx <= numbers.length + 1; idx ++)
document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
}
}
</script>


After the map is created, when a user clicks on a table cell it should do this:

<TABLE>
<TR>
<TD class='terrain' id='1' name="" onclick="scriptPisadela('1');"></TD>
<TD class='terrain' id='2' name="" onclick="scriptPisadela('2');"></TD>
<TD class='terrain' id='3' name="" onclick="scriptPisadela('3');"></TD>
<TD class='terrain' id='4' name="" onclick="scriptPisadela('4');"></TD>
<TD class='terrain' id='5' name="" onclick="scriptPisadela('5');"></TD>
<TD class='terrain' id='6' name="" onclick="scriptPisadela('6');"></TD>
<TD class='terrain' id='7' name="" onclick="scriptPisadela('7');"></TD>
</TR>

<script type="text/javascript">
function scriptPisadela(myid){
var Name = document.getElementById(myid).attributes["name"].value;
if(Name == 'x') document.getElementById(myid).className = 'bomb';
else document.getElementById(myid).className = 'livre';
var td = document.getElementById(myid);
var text = document.createTextNode(Name);
td.appendChild(text);
}
</script>


//This is supposed to be testing out if the name of the element is a bomb or not and it should print out the name. I did this because if I just did something like
TD class='terrain' id='1' onclick="scriptPisadela('1');">TEXT HERE</TD>

the user could just ctrl + a and it would be able to see all the elements and win the game.

Here is a link to FiddleJs if it's a little hard to see here, I will be commenting out the code on fiddle as well https://jsfiddle.net/nzgmdf7p/2/

And here is the link for the actual html document https://drive.google.com/file/d/0B1xc1ft-s78NVm5FN0lvckhsVVk/view?usp=sharing

Any help is highly appreciated.

Answer

Based on the fiddle provided by you(after correcting the syntax error) only issue i can see is the below line

for(var idx = 1; idx <= numbers.length + 1; idx ++)
      document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
 }

your are looping array till numbers.length + 1 while number have a length of 28. Once the loop goes above 27, you will encounter an error since no such element is present in the html.

you need to change

for(var idx = 1; idx < numbers.length; idx ++)
    document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
    }

Working example : https://plnkr.co/edit/hkdiX1U6G6CWOtE5qdbr?p=preview

Comments