onClick() JavaScript visibility change

Question

I'm extremely new to code writing, so please forgive any ignorance on my part. I have a simple bit of code in which I would like to make the visibility of a couple of "outerCircle" divs turn off when the user clicks anywhere on the page. I have tried several ways, but it's just not working. If anyone has a suggestion, I would greatly appreciate it. Here is what I have so far:

<body onload = "startBlink()" onclick = "onOff()">
<p id = "title">Click anywhere to turn the outer circles on or off.</p>
<div class = "container" onclick = "onOff()">
    <div class = "outerCircle" id = "outerLeftCircle">
        <div class = "innerCircle" id = "innerLeftCircle">
        </div>
    </div>

    <div class = "outerCircle" id = "outerRightCircle">
        <div class = "innerCircle" id = "innerRightCircle">
        </div>
    </div>  
</div><!-- Closes the container div -->


<script>
    // This function blinks the innerCircle div //
    function startBlink(){
        var colors = ["white","black"];
        var i = 0;   
            setInterval(function() {
                $(".innerCircle").css("background-color", colors[i]);
                i = (i+1)%colors.length;
            }, 400);
    }

    // This function turns the outerCircle divs on or off //
    function onOff() {
        alert("Entering function now");
        if (getElementById(".outerCircle").style.visibility = "visible") {
            getElementById(".outerCircle").style.visibility = "hidden";
            getElementById(".outerLeftCircle").style.visibility = "hidden";
            getElementById(".outerRightCircle").style.visibility = "hidden";
        } else {
            getElementById(".outerCircle").style.visibility = "visible";
            getElementById(".outerLeftCircle").style.visibility = "visible";
            getElementById(".outerRightCircle").style.visibility = "visible";
        }
    }

</script>

Just a quick question. Why aren't you using jQuery all the way? You use it inside the startBlink method, but not in the onOff method. Any reason for that? — puelo
– puelo, Commented Feb 22, 2015 at 22:33
getElementById(".outerCircle") is your problem, use querySelector(".outerCircle") instead or $(".outerCircle")[0] in all your getElement...s ALSO your if is wrong, put == insead of your = — Santiago Hernández
– Santiago Hernández, Commented Feb 22, 2015 at 22:33
@puelo: I think the question is rather: Why isn't he using plain javascript all the way, and ditching jQuery as it's not needed here? — Kjell Ivar
– Kjell Ivar, Commented Feb 22, 2015 at 22:54

user4494285 · Accepted Answer · 2015-02-22 22:41:58Z

1

simple.

function onOff(){

$('.outerCircle').toggle()

}

answered Feb 22, 2015 at 22:41

user4494285

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

Comments

Community · Accepted Answer · 2017-05-23 12:06:24Z

1

So looking at your code, you can fix it changing all your getElementById() with querySelector() because you are giving the function getElementById() a CSS selector as a parameter, but it is waiting for an id selector, which is a simple string without # or . or whatever we use in CSS.

Or as @puelo was pointing you can use jQuery instead of native javascript, it is already loaded, so why not, you can use $() with your CSS selectors:

NATIVE Javascript: jsFiddle

// This function turns the outerCircle divs on or off //
function onOff() {
    alert("Entering function now");
    if (!document.querySelector("#outerLeftCircle").style.visibility || document.querySelector("#outerLeftCircle").style.visibility == "visible") {
      document.querySelector("#outerLeftCircle").style.visibility = "hidden";
      document.querySelector("#outerRightCircle").style.visibility = "hidden";
    } else {
      document.querySelector("#outerLeftCircle").style.visibility = "visible";
      document.querySelector("#outerRightCircle").style.visibility = "visible";
    }
}

JQUERY: jsFiddle

// This function turns the outerCircle divs on or off //
function onOff() {
    alert("Entering function now");
    if ($("#outerLeftCircle").css("visibility") === "visible") {
        $("#outerLeftCircle")[0].style.visibility = "hidden";
        $("#outerRightCircle")[0].style.visibility = "hidden";
    } else {
        $("#outerLeftCircle")[0].style.visibility = "visible";
        $("#outerRightCircle")[0].style.visibility = "visible";
    }
}

JQUERY... another way: jsFiddle

// This function turns the outerCircle divs on or off //
function onOff() {
    alert("Entering function now");
    if ($("#outerLeftCircle").css("visibility") === "visible") {
        $(".outerCircle").css("visibility","hidden");
    } else {
        $(".outerCircle").css("visibility","visible");
    }
}

Another thing is that your if is wrong, put == insead of your =

EDIT: as @KjellIvar commented: "Or even better, put === instead of =" should be a bit faster than double equal, due that prevents js engine to perform type convertions. for more info:

StackOverflow: Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?

ECMAScript: The Abstract Equality Comparison Algorithm and The Strict Equals Operator ( === )

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Feb 22, 2015 at 22:43

Santiago Hernández

5,6762 gold badges27 silver badges34 bronze badges

5 Comments

Kjell Ivar Over a year ago

Or even better, put === instead of = :)

Santiago Hernández Over a year ago

@KjellIvar i don't think is better but works as well ;)

Kjell Ivar Over a year ago

Why not? You know you're comparing strings here, so there's no point in using loose equality and type conversion.

jsmwrench Over a year ago

Thank you all for replying. I used the second set of JQuery code and it worked great! As I mentioned, I am completely new to coding and I just didn't know where to go with it. Sorry for sounding ignorant, but can you tell me what the advantages are for using either Javascript or JQuery? Is there a particular one that is better than the other? Thank you, again!

Santiago Hernández Over a year ago

that's a good question there are many advantages as well as disadvantages, this post will help you: Advantages of using pure JavaScript over JQuery

Collectives™ on Stack Overflow

onClick() JavaScript visibility change

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related