How to get Javascript's "getElementsByClassName()" to work?

Question

When I do this, everything works just fine:

function openTab(tabName)
{
    document.getElementById("divUsers").className = "invisible";
    document.getElementById("divGroups").className = "invisible";
    document.getElementById("divZFSPools").className = "invisible";
    document.getElementById("divShares").className = "invisible";

    document.getElementById(tabName).className = "visible";
}

But when I do this, nothing happens:

function openTab(tabName)
{
    var targetTab, activeTab;

    // Get the div:
    targetTab = document.getElementById(tabName);

    // If it is the active tab, return:
    if(targetTab.style.display.className == "visible");
        return;

    // No, it is not the active tab:
    document.getElementsByClassName("visible")[0].className = "invisible";

  // Make the target tab visible:
  document.getElementById(tabName).className = "visible";

}

FYI: "visible" and "invisible" are two CSS class names.

Does anyone have idea why? How can I achieve the desktop tab control behaviour using HTML and Javascript?

Possible duplicate of [How to get element by class name?](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) — Pierre-Adrien Maison, Mar 30 '18 at 15:46
Is it a typo or you did it intentionally `if(targetTab.style.display.className == "visible");` see the **semicolon** at the end of `if` — A l w a y s S u n n y, Mar 30 '18 at 15:46
Yes, I am using PyCharm CE (on FreeBSD) as my IDE and unfortunately it does not help much with typos. I removed the semicolon and it worked like a charm. Thank you. — SCilek, Mar 30 '18 at 15:51
The way you're attributing a class name it isn't recommended, read this: https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element — Ricardo Pontual, Mar 30 '18 at 16:10

A l w a y s S u n n y · Accepted Answer · 2018-03-30T15:55:55.533

If I don't misunderstood you question just remove the ; after your if condition because a simple typo (;) can make huge difference to your code.

Assume,

if (0 === 1); { alert("Hello World") }

// equivalent to:

if (0 === 1) /*do nothing*/ ;
alert ("Hello World");

This code will alert "Hello World", but not because 0 equals 1, but because of the semicolon. It makes JavaScript think that you have an empty statement there, and everything to the right of it is treated as no longer belonging to the if conditional and thus independent of it.

Source : https://www.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

So on your code it will be like this,

//If it is the active tab, return:
if(targetTab.style.display.className == "visible"); 
    return;                                    //^^ remove this semicolon

How to get Javascript's "getElementsByClassName()" to work?

1 Answers1