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

Share Improve this question Follow edited Jun 17, 2012 at 21:48 ThiefMaster 319k8585 gold badges607607 silver badges646646 bronze badges asked Jun 17, 2012 at 21:45 Mia WMia W 4933 silver badges1111 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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