Question: I'm looking to make a program that will basically change color when each element is clicked individually. I've got it to work to the point where I can click on just an the page and both of the elements can change color but I need them to be independent of each other. How would I do something like this?

```
document.onload = function()
{
    document.onclick = changeTest("box0", "green");
};

function changeTest(id, color)
{
    var element;
    element = document.getElementById(id);
    element.style.backgroundColor = color;
}

```

**Html**:

```
<!DOCTYPE html>

<html lang="en">
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>

<style type="text/css">
{
border: 0;
margin:0;
paddig: 0;
}
body
{
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
    height: 10em;
    width: 10em;
    margin: 2px;
}
#box0
{
    background-color: yellow;
}
#box1
{
    background-color: red;
}
</style>

</head>
<body>
    <div class="box" id="box0"></div>
    <div class="box" id="box1"></div>
</body>
</html>

```

Answer: 
```js
var box0 = document.getElementById("box0");
var box1 = document.getElementById("box1");

var color = "green";

function changeColor(box, color) {
  box.style.backgroundColor = color;
}

box0.onclick = function() {
  changeColor(this, color);
};

box1.onclick = function() {
  changeColor(this, color);
};
```

```html
<!DOCTYPE html>
<html>
  <head>
    <title>this will appear on the tab in the browser</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="onclick.js" type="text/javascript"></script>
    <style type="text/css">
      * {
        border: 0;
        margin:0;
        padding: 0;
      }

      body {
        font-family:"Times New Roman"; serif;
        font-size: 12pt;
      }

      .box
      {
        height: 10em;
        width: 10em;
        margin: 2px;
      }

      #box0 {
        background-color: yellow;
      }

      #box1 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box0"></div>
    <div class="box" id="box1"></div>
  </body>
</html>
```

Knowing you can also perfom this with [addEventListener()](http://www.w3schools.com/jsref/met_element_addeventlistener.asp) method.
I would use jquery for that:

html: 

```
<body>
<div class="box" id="box0">box0</div>
<div class="box" id="box1">box1</div>
</body>

```

and Script:

```
 $( "#box0" ).click(function() {
   changeTest("box0", "green");
});

$( "#box1" ).click(function() {
    changeTest("box1", "red");
});

```

Here's an jsfiddle: 

<http://jsfiddle.net/o8c8y23x/>

Ok, without jquery: 

```
<body>
  <div class="box" id="box0" onclick = "changeTest('box0', 'red');">box0</div>
  <div class="box" id="box1" onclick = "changeTest('box1', 'green');">box1</div>
</body>

```

jsfiddle: 
<http://jsfiddle.net/o8c8y23x/2/>