CODEWITHSUNDEEP
javascripthtml
user2009653
user2009653

Reputation: 3

Getting elements to change color individually

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>

Upvotes: 0

Views: 64

Answers (3)

Anwar
Anwar

Reputation: 4246

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);
};
<!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() method.

Upvotes: 2

less
less

Reputation: 711

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/

Upvotes: 0

thomasb
thomasb

Reputation: 6037

You will have to bind the event listeners to the individual boxes. It's as simple as that. Something like this (not tested):

document.getElementById("box0").onclick = changeTest("box0", "green");
document.getElementById("box1").onclick = changeTest("box1", "green");

Upvotes: 0

Related Questions