Mr.Toxy Mr.Toxy - 1 year ago 61
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

to the
of the table (I think
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
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]);

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

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

<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);

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

And here is the link for the actual html document

Any help is highly appreciated.

Answer Source

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 :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download