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 3 Years Ago by happygeek: fixed formatting

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>

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

This article has been dead for over six months. Start a new discussion instead.