CODEWITHSUNDEEP
javascriptcss
Optiq
Optiq

Reputation: 3182

else if command not executing task

I want to toggle the color of the background based on whether or not a div has the display attribute set to block or none.

So far what I have is

if(document.getElementById("welcome").style.display="block"){
        mpage.style.background="rgba(27, 27, 27, .88)";

    }
        else if (document.getElementById("welcome").style.display="none"){
            mpage.style.background="rgba(255, 255, 255, .44)";
            }

The only reason I made it that far is because I found another post on here attempting to do something similar and this is the best I could form it. I used a syntax validator to check the code and it came back ok, nothings popping up in the console, yet the color doesn't change when I trigger the "welcome" div to toggle to "display:none;".

Upvotes: 0

Views: 32

Answers (4)

Joseph Khella
Joseph Khella

Reputation: 715

if(document.getElementById("welcome").style.display=="block"){
        mpage.style.background="rgba(27, 27, 27, .88)";

    }else if (document.getElementById("welcome").style.display=="none"){
        mpage.style.background="rgba(255, 255, 255, .44)";
       }

using a single = assigns the value to the display then checks if it's true and it always be true, but using == only checks the value, using === checks the value and the type

UPDATE You can't check the display property if it's given with the stylesheet, this only works if the style is written inline the div tag

ex:

<div id="welcome" style="display:none;">some content</div>

Upvotes: 1

Nachiketha
Nachiketha

Reputation: 23555

You have to use equality operator instead of assignment operator For more info visit this link

Upvotes: 0

Ali Zia
Ali Zia

Reputation: 3875

Change

if(document.getElementById("welcome").style.display="block"){

To

if(document.getElementById("welcome").style.display=="block"){

Upvotes: 0

n-dru
n-dru

Reputation: 9430

Change

if(document.getElementById("welcome").style.display="block"){
                                                   ^

to

if(document.getElementById("welcome").style.display=="block"){
                                                   ^^

Otherwise, using single =, you just change the style instead of checking if display is "block"

Upvotes: 0

Related Questions