Was trying to make a minesweeper in javascript and ran into this problem...

I created a table and each td is a "box" with either a mine or nothing(Currently) in it. After I click on a box, the javascript should change the onclick from "clicked(this.id)" to an alert that says "NOPE"(made an alert just to test if something was happening), but what happends is:

1. I click on "box 1", it reveals what's there (bomb or nothing)
2. I click on it again, this time I get an alert "NOPE" - which means the onclick has changed. Good!
3. I click on "box 2", it reveals what's there (bomb or nothing)
4. I click on it again, this time I get an alert "NOPE" - which means this onclick has changed too!
5. I click on "box 1" again. The clicked(this.id) runs again. (This is shown because I added a counter for each time the function runs)

For some reason, the onclick returns to its original value (clicked(this.id))..

I made a test page, a table with 2 td's and the same thought in mind(change onclick value after it's clicked) and it works.. I have no idea how to fix this...

The test.html that does work:

The HTML from the site that doesn't work as intended:

And the Javascript from the site that doesn't work as intended:

Was trying to make a minesweeper in javascript and ran into this problem...

I created a table and each td is a "box" with either a mine or nothing(Currently) in it. After I click on a box, the javascript should change the onclick from "clicked(this.id)" to an alert that says "NOPE"(made an alert just to test if something was happening), but what happends is:

1. I click on "box 1", it reveals what's there (bomb or nothing)
2. I click on it again, this time I get an alert "NOPE" - which means the onclick has changed. Good!
3. I click on "box 2", it reveals what's there (bomb or nothing)
4. I click on it again, this time I get an alert "NOPE" - which means this onclick has changed too!
5. I click on "box 1" again. The clicked(this.id) runs again. (This is shown because I added a counter for each time the function runs)

For some reason, the onclick returns to its original value (clicked(this.id))..

I made a test page, a table with 2 td's and the same thought in mind(change onclick value after it's clicked) and it works.. I have no idea how to fix this...

The test.html that does work: http://pastebin./62ayRJps

The HTML from the site that doesn't work as intended: http://pastebin./SZ6NU8j9

And the Javascript from the site that doesn't work as intended: http://pastebin./bevJHNLc

• javascript
• html

Share Improve this question Follow edited Jan 21, 2013 at 19:58 user1021085 asked Jan 21, 2013 at 19:41 user1021085user1021085 72933 gold badges1010 silver badges2929 bronze badges 3

• 2 If you want to provide a JavaScript sample, use a JSFiddle because it is interactive: jsfiddle/QAnHL – mellamokb Commented Jan 21, 2013 at 19:43
• It won't let me just link to jsfiddle – user1021085 Commented Jan 21, 2013 at 19:47
• 1 @user1021085 The reason for that was also displayed to you; you need to include relevant code inline. – user1726343 Commented Jan 21, 2013 at 19:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +50

Your click event handlers are being reset because of this line in clicked(id):

document.getElementById("minesweeper").innerHTML += ammountClicked+" - "

Each table cell has a onclick='clicked(this.id);' attribute in its HTML. When you assign your test function tst to the table cell DOM object, you're setting the onclick property of the DOM object, but that doesn't change the onclick attribute of the HTML. (Yes, it's confusing.)

In the line of code above, the browser reads the innerHTML from the minesweeper div (which has the original onclick attributes), concatenates it with another string, then reassigns the result back to the minesweeper div. This wipes out the original contents of the div and replaces it with the new HTML (a table where every cell has the original onclick attribute).

---

If you want to have a message area, I suggest setting innerHTML on another element: Demo

In the demo, I changed line 49 (adding a span):

print += "</table><span id='message'></span>";

and line 107 (assigning the text to the span):

document.getElementById("message").innerHTML += ammountClicked+" - ";

I suggest you keep track of the state of each item. It's best not to modify code while running your application.

var states = {1: 0, 2: 0};

function clicked(id)
{
    if (states[id] === 0)
      alert("First time clicking me, eh?");
    else
      alert("Seems we have a repeat offender!");

    states[id]++;
}

This lets you split the logic in your function by checking if the state for a given id has been changed (e.g., by a previous click).

interactive demo on jsbin

With a few modifications in function clicked(id) it can work:

1. ment line //document.getElementById(id).onclick = tst;
2. add field[row][column] = false; at the end of the function

3. check if field contains false before performing any actions:

   if (field[row][column] == false) {
       console.log("This cell has already been clicked");
       return;
   }
   

There is no need to change onclick events.

The problem, as explained by Jeffery To is the following:

1. you click on cell 0,0
2. function clicked is called
3. minesweeper.innerHTML = minesweeper.innerHTML + "1 - " [all onclick events resetted]
4. onclick event of cell 0,0 is changed
5. you click on a new cell, 0,1 for example
6. minesweeper.innerHTML = minesweeper.innerHTML + "2 - " [all onclick events resetted]
7. onclick event of cell 0,1 is changed

onclick events are resetted because innerHTML contains all the onclick declarations. It is like rewriting all the HTML of that div, and thus rewriting all child elements and its events. This is also the reason why your simple example (the one with just two cells) works.