Div-color changing

JavaScript
1

I need to make background color change when onmouseover function appear. this is actually simple. but i need no javaScript codes in html-document. all javaScript should be in .js file

please help. what’s wrong with this script:

<script>
document.getElementById(‘cell’).onmouseover = function() {
document.getElementById(‘cell’).style.backgroundColor = ‘blue’;
}

document.getElementById(‘cell’).onmouseout = function() {
document.getElementById(‘cell’).style.backgroundColor = ‘green’;
}
</script>

html is here:

<div id=“cell” style=“width:350px; height:180px; background-color:green;” >change color</div>

2

Take a look here, specially the css hover class:

You’ll need to wait till the dom is ready before you can attach the events.

  1. either put your javascript towards the bottom
  2. or check that dom is ready, look into jquery, it will save you a lot of time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <title>Test</title>
 
</head>
 
 
<body>
 <div id="one" style="width: 150px">This is div 1</div>
</body>
 
</html>
 
<script lang="javascript" type="text/javascript">  
 document.getElementById("one").onmouseover = function(){
  this.style.backgroundColor = 'green';
 }
 document.getElementById("one").onmouseout = function(){
  this.style.backgroundColor = 'red';
 } 
</script>
3

problem solved. thanx, tahirjadoon :slight_smile: