JavaScript Forum

**LayneMitch** · 08-17-2008, 08:36 PM

This is supposed to be a simple background color change using event handlers and I can't figure out why it's not working.

Code:

 
<html><head><title>Prob.11</title>
<script type="text/javascript">

function attachHandlers {

var the_opts=document.getElementsByTagName("input");

for (var i=0; i<the_opts.length; i++) {

 if ((the_opts[i].nodeName=="input")||
     (the_opts[i].nodeName=="INPUT"))
 {
   the_opts[i].onclick=changeBackground;
 }
}
},

function changeBackground(evt){

var purp_button = document.getElementById("first_button");
var yellow_button = document.getElementById("sec_button");
var pink_button = document.getElementById("third_button");
var black_button = document.getElementById("fourth_button");
var the_body = document.getElementsByTagName("body");

 if (!evt)
 {
  evt = event;
  this_sel = evt.srcElement;
 }
 else
 {
  this_sel = evt.target;
 }

 if (this_sel=purp_button)
  {
   the_body.style.bgColor="purple";
  }

 if (this_sel=yellow_button)
  {
   the_body.style.bgColor="yellow";
  }

 if (this_sel=pink_button)
  {
   the_body.style.bgColor="pink";
  }
 
 if (this_sel=black_button)
  {
   the_body.style.bgColor="black";
  }
}

</script></head>
<body bgColor="blue" onLoad="attachHandlers();">

<div class="the_buttons">
<input type="button" value="purple" id="first_button"><br>
<input type="button" value="yellow" id="sec_button"><br>
<input type="button" value="pink" id="third_button"><br>
<input type="button" value="black" id="fourth_button">
</div>
</body>
</html>

**LayneMitch** · 08-17-2008, 10:05 PM

Solved it already...Thanks...