how to change td color, by click on the td(like battleship game)? here is the code'with specific id :

str +="<td id='" + counter + "' onclick='checkClick(" + counter + "," + i + "," + j + ")' style = 'background-color: Black; height:30px; width:30px'>";

(the str in the end will be use with innerHTML that will update this on div inside the body

the checkClick function need to change it , i tried with innerHTML or to get the td by ElementID and it didnt work

how to change td color, by click on the td(like battleship game)? here is the code'with specific id :

str +="<td id='" + counter + "' onclick='checkClick(" + counter + "," + i + "," + j + ")' style = 'background-color: Black; height:30px; width:30px'>";

(the str in the end will be use with innerHTML that will update this on div inside the body

the checkClick function need to change it , i tried with innerHTML or to get the td by ElementID and it didnt work

• javascript

• 1 Definitely have a look at quirksmode/js/introevents.html. A prehensive guide about event handling in JS. – Felix Kling Commented Jun 17, 2012 at 21:52
• My suggestion would be not to += the innerHTML I would append() as I found out in my own question – gabeio Commented Jun 17, 2012 at 22:03

2 Answers 2

# my_markup.html
<td id="clickable">Blah</td>

# my_scripts.js
document.getElementById("clickable").addEventListener("click", tableClicked);
function tableClicked(e) {
  e.target.style.backgroundColor = '#FF0000';
}

This should do the job:

Changing Background and Text Color of HTML Elements

or this, even simplier approach:

Change the Background Color of an HTML Element (DIV)

<div id="main" class="main">
  <p>hello!</p>
</div>

  <script type="text/javascript">
  function changecolor()
  {
    var mainContent = "";
    mainContent = document.getElementById("main");
    mainContent.style.backgroundColor = "#FFFF99";
  }
  </script>