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>

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?

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.