DaniWeb IT Discussion Community - Javascript event & color change problem

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Javascript event & color change problem (http://www.daniweb.com/forums/thread31765.html)

Javascript event & color change problem

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.

Quote:

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

Re: Javascript event & color change problem

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>

Re: Javascript event & color change problem

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

Re: Javascript event & color change problem

You used comands for DOM which you did not declared.

document.style.backgroundColor=green;