CODEWITHSUNDEEP
javascripthtmlcssnavbarmenubar
Tom Piaggio
Tom Piaggio

Reputation: 669

Menu bar function not working javascript

I'm trying to write a menu bar on the left side of the screen which is already set as a div with the id blur. I set another image which has the id menuImage which is actually a gear icon which should open the menu bar, however it simply won't respond and I can't figure out why. Please help me I'm stuck with this. Here is the code: 

var state = false;
var opacity = 0.0;
var menuImage = document.getElementById("menuImage");
var blur = document.getElementById("blur");

var blurAppearence = function(){
    if(state == false){
        state = true;
    } else {
        if(state == true){
            state = false;
        }
    }
}
if(state == false){
    var disappearence = function(){
        if(opacity <= 0.4){
            blur.style.opacity = opacity;
        } else {
            clearInterval(timer)
        }
        opacity += 0.1;
    }
   var timer = window.setInterval(appearence, 50);

} else {

    if(state == true){
        var appearence = function(){
            if(opacity >= 0.0){
                blur.style.opacity = opacity;
            } else {
                clearInterval(timer2);
            }
            opacity -= 0.1;
        }
       var timer2 = window.setInterval(appearence, 50);
    }
}


menuImage.addEventListener("click", blurAppearence);

Upvotes: 0

Views: 137

Answers (1)

Grant Orndorff
Grant Orndorff

Reputation: 11

It looks like you close your blurAppearance function block too early.

The closing brace that is right above the line

if(state == false){

should actually go right before the line

menuImage.addEventListener("click", blurAppearence);

also your first window.setInterval should call the disappearance function.

see https://jsfiddle.net/orndorffgrant/cfrc5b55/

You can also replace your

if(state == false){
    state = true;
} else {
    if(state == true){
        state = false;
    }
}

block with:

state = !state;

Upvotes: 1

Related Questions