Javascript Conditional Statement Not Working Correctly

Question

I see to be having issues using this Javascript code to make a list of download options appear and disappear accordingly based on their visibility when triggered: If it's visible, it will be hidden. If it's hidden, it will be visible.

window.openList = function(listName) {
    var list = document.getElementById(listName + "-list");
    if (list.style.visibility == "hidden") {
        list.style.visibility = "visible";
    } else if (list.style.visibility == "visible") {
        list.style.visibility = "hidden";
    }
}

Here's the html that will be interacting with the Javascript:

<div id="downloads">
                <div id="redtech-gpu-download" class="downloads">
                    <p onclick="javascript: openList('redtech-gpu-download');">Redtech GPU</p>
                    <div id="redtech-gpu-download-list" class="download-list">
                        <span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-gpu-001.zip', '_blank');">GPU Ver 0.0.1 Alpha</p>
                        </span>
                        <span class="download-list-item download-list-item-b">
                            <p>{ More Coming Soon! }</p>
                        </span>
                    </div>
                </div>

                <div id="redtech-memory-download" class="downloads">
                    <p onclick="javascript: openList('redtech-memory-download');">Redtech Memory</p>
                    <div id="redtech-memory-download-list" class="download-list">
                        <!--<span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-memory-001.zip', '_blank');">Memory Ver 0.0.1 Alpha</p>
                        </span>-->
                        <span class="download-list-item download-list-item-b">
                            <p>{ Coming Soon! }</p>
                        </span>
                    </div>
                </div>
            </div>

I assume you're setting the visibility in your CSS? style.visibility will only work for inline styles. You should use getComputedStyle to read the computed CSS styles — CodingIntrigue
– CodingIntrigue, Commented Jun 17, 2015 at 11:54

DracoAdvigilat · Accepted Answer · 2015-06-17 11:51:55Z

1

In the code you provided, list.style.visibility is not set before you attempt to check it. Thus its value is going to be "", which is neither equal to "visible" or "hidden".

There are two possible quick fixes to your code you can make to fix this: Either include style="visibility:visible;" on the tags you plan on being able to hide, or make your else if statement just an else statement (no if).

answered Jun 17, 2015 at 11:51

DracoAdvigilat

1414 bronze badges

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

Comments

Mathijs Rutgers · Accepted Answer · 2015-06-17 11:52:30Z

Your statement is not correct. This is what you actually do:

if (something) {
   //do something
} 

else if (list.style.visibility == "visible") {
    //if the if case is false do this:
}

but here after normally would be an else clause, what to do if nothing matches the above statements.

The correct way would be:

window.openList = function(listName) {
    var list = document.getElementById(listName + "-list");
    console.log(list);
    if (list.style.visibility == "hidden") {
        list.style.visibility = "visible";
    } else {
        list.style.visibility = "hidden";
    }
}

<div id="downloads">
                <div id="redtech-gpu-download" class="downloads">
                    <p onclick="openList('redtech-gpu-download');">Redtech GPU</p>
                    <div id="redtech-gpu-download-list" class="download-list">
                        <span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-gpu-001.zip', '_blank');">GPU Ver 0.0.1 Alpha</p>
                        </span>
                        <span class="download-list-item download-list-item-b">
                            <p>More Coming Soon!</p>
                        </span>
                    </div>
                </div>

                <div id="redtech-memory-download" class="downloads">
                    <p onclick="javascript: openList('redtech-memory-download');">Redtech Memory</p>
                    <div id="redtech-memory-download-list" class="download-list">
                        <!--<span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-memory-001.zip', '_blank');">Memory Ver 0.0.1 Alpha</p>
                        </span>-->
                        <span class="download-list-item download-list-item-b">                          <p> Coming Soon!</p>
                        </span>
                    </div>
                </div>
            </div>

Collectives™ on Stack Overflow

Javascript Conditional Statement Not Working Correctly

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related