Member Avatar for apcxpc

hi all

I'm having an odd problem with Javascript. I created a table with a single row and a single column (and gave all of them IDs). Then I use onclick events to pick up mouseclicks and call the function clicked(evt). I know this function is getting called, and I know this function picks up exactly which source element was clicked. I'm trying to write it so that if the user clicks within the box, the color of the box changes. I'm having a problem with this. I've tried several slight variations of the code, but nothing seems to work.

Any help would be much appreciated.

<html>
<head>
<title>More javascript</title>
<script language=JavaScript>
function clicked(evt){
window.alert("You clicked the page element: "+evt.srcElement.id);
if (evt.srcElement.id == "mycol"){
document.style.backgroundColor=green;
myTable.style.backgroundColor=blue;
mycol.innerText="haha";
}
}
</script>
</head>

<body id="mybody" onclick="clicked(event)">
<br><br>
<table id="myTable" style="background-color: gray">
<tr id="myrow">
<td id="mycol">Click this box to change colors...</td>
</tr>
</table>
</body>

</html>
Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 3 Replies
  • 188 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by peter_budo
Member Avatar for peter_budo

This worked for me

<html>
<head>
<title>More javascript</title>

<script language=JavaScript>

function clicked(evt){

window.alert("You clicked the page element: "+evt.srcElement.id);
if (evt.srcElement.id == "mycol"){
document.bgColor="green";
myTable.bgColor="blue";  
mycol.innerText="haha"; 
}
}

</script>
</head>


<body id="mybody" onclick="clicked(event)">

<br><br>
<table id="myTable" border="1" >
<tr id="myrow">
<td id="mycol" style="cursor: pointer;"  >Click this box to change colors...</td>
</tr>
</table>
</body>


</html>
Member Avatar for apcxpc

Thanks very much peter_budo. Any idea why my code wouldn't work?

Member Avatar for peter_budo

You used comands for DOM which you did not declared.

document.style.backgroundColor=green;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.