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, Feb 22 '15 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, Feb 22 '15 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, Feb 22 '15 at 22:54

score 1 · Answer 1 · answered Feb 22 '15 at 22:41

1

simple.

function onOff(){

$('.outerCircle').toggle()

}

answered Feb 22 '15 at 22:41

score 1 · Answer 2 · edited May 23 '17 at 12:06

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 ( === )

Why not? You know you're comparing strings here, so there's no point in using loose equality and type conversion. — Kjell Ivar, Feb 22 '15 at 22:57
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! — jsmwrench, Feb 24 '15 at 07:14
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](http://programmers.stackexchange.com/questions/166273/advantages-of-using-pure-javascript-over-jquery) — Santiago Hernández, Feb 24 '15 at 18:49

onClick() JavaScript visibility change

2 Answers2