Onclick keeps going back to its original value

Question

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.com/62ayRJps

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

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

Answer 1

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+" - ";