CODEWITHSUNDEEP
javascripthtml
Rifa Achrinza
Rifa Achrinza

Reputation: 1585

Javascript Conditional Statement Not Working Correctly

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>

Upvotes: 0

Views: 61

Answers (2)

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

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>

Upvotes: 0

DracoAdvigilat
DracoAdvigilat

Reputation: 141

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).

Upvotes: 1

Related Questions