Changing div css color via onclick and by using getElementByName

Question

this is what I've done so far using CSS,Javascript and HTML.. if you click the red circle, it will change to yellow which is working but, I just want to add some functions, if the user clicks anywhere outside of the div, then the div will go back to its original color.

How can I do it?

here's my code:

HTML:

<html>
    <body>
        <div id="circle" name="color" onclick="changeColor()"></div>
    </body>
</html>

CSS:

#circle{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: #F00;
    border: 2px solid ; 
}

JS:

function changeColor() {
    document.getElementsByName('color')[0].style.background="#FF0"; 
}

Thanks.. :)

You can add the css style class to your element on click event and remove when clicked out side. — VPK
– VPK, Commented Aug 26, 2014 at 7:30
add another div around your "circle" and give it 100% width/height, and z-index lower than your circle. then add on click to it ... — trainoasis
– trainoasis, Commented Aug 26, 2014 at 7:30

Madara's Ghost · Accepted Answer · 2014-08-26 07:47:58Z

4

The most flexible way of doing it is to add a class .active to your CSS, and apply that class to your circle on click.

If you want to catch for clicks outside the circle, you'll have to set the event listener on the body, and then check e.target to see if it matches your element.

var circle = document.getElementById('circle');
document.onclick = function(e) { //Set the event handler in JavaScript, not in HTML.
    if (e.target === circle) { //e.target is the clicked element.
        circle.classList.add("active");
    }
    else {
        circle.classList.remove("active");
    }
}

Then in your CSS:

#circle{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: #F00;
    border: 2px solid ; 
}
#circle.active {
    background: #FF0;
}

Toggle means that it would apply the class if it's not there, and remove it if it is. Now if you want to add extra styles to happen on click, you can simply add them to the #circle.active selector.

Demo

edited Aug 26, 2014 at 7:47

answered Aug 26, 2014 at 7:35

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Richa Over a year ago

He wants to change color when user click outside the div and not on the div.

SSS Over a year ago

He doesnt want the toggle effect. He wants event to apply if clicked outside.

Fractaliste Over a year ago

e.target is an HTMLElement, how can you compare it with its id into the if statment?

Madara's Ghost Over a year ago

@Fractaliste I don't. I compare it with circle, which is another HTMLElement.

Suganth G · Accepted Answer · 2014-08-26 07:37:41Z

0

Try this:

 function changeColor() {
            var dd = document.getElementById('circle');
            dd.style.backgroundColor = '#FF0';

        }

edited Aug 26, 2014 at 7:37

answered Aug 26, 2014 at 7:31

Suganth G

5,1563 gold badges27 silver badges45 bronze badges

Comments

Ankur · Accepted Answer · 2014-08-26 07:43:48Z

0

HTML

<html>
    <body>
        <div class="circle" id = "color"></div>
    </body>
</html>

CSS

#color{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: #F00;
    border: 2px solid ; 
}

JS

document.onreadystatechange = function(){
    if(document.readyState !== 'complete') return;
     var node = document.getElementById('color');
     document.body.onclick = function(evt){
         if(evt.target.id == 'color'){
           node.style.backgroundColor = "#ffff00";
         } else {
           node.style.backgroundColor = "#ff0000";
         }
     }
};

Here's a JSBin

answered Aug 26, 2014 at 7:43

Ankur

7911 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Changing div css color via onclick and by using getElementByName

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related