Why this javacript code is not working? (Simple)

Question

I know there will be a silly mistake. But can you find it? I am just starting off. So, thanks if you help me!

Let me know what is causing error in this code. I just want to hide/show some elements onclick using javacript, so not like <button onclick=....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <a href="#"><h1 class="et_pb_tab_0">Tab 1</h1></body></a>
    <a href="#"><h1 class="et_pb_tab_1">Tab 2</h1></a>
    <div class="month">month</div>
    <div class="year">year</div>
    <script>
    const active = document.getElementsByClassName("et_pb_tab_0");
    const deactive = document.getElementsByClassName("et_pb_tab_1");
    const year = document.getElementsByClassName("year");
    const month = document.getElementsByClassName("month");

    active.onClick = () => {
        month.style.display = "block";
        year.style.display = "none";
    };
    deactive.onClick = ()=> {
        year.style.display = "block";
        month.style.display = "none";
    };

</script>
    <style>
        .month{
            display: block;
        }
        .year{
            display: none;
        }
    </style>
</body>
</html>

Open the browser's developer tools. Read the error message. The first problem is a typo. — Quentin, Apr 06 '22 at 09:15
The second problem is a FAQ: https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — Quentin, Apr 06 '22 at 09:15
The third problem is another typo: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick (JavaScript is case sensitive) but you should probably be using https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener anyway — Quentin, Apr 06 '22 at 09:16
How does this have anything to do with `reactjs`? Please tag appropriately. (Tag removed.) — CBroe, Apr 06 '22 at 09:29

score 0 · Accepted Answer · answered Apr 06 '22 at 09:28

getElementsByClassName returns a NodeList, a sort of array without being an array.

What you can do is use document.querySelector to get the class you want. You will need to use a css selector as argument for it.

Also, to listen to events use addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <a href="#"><h1 class="et_pb_tab_0">Tab 1</h1></body></a>
    <a href="#"><h1 class="et_pb_tab_1">Tab 2</h1></a>
    <div class="month">month</div>
    <div class="year">year</div>
    <script>
    const active = document.querySelector(".et_pb_tab_0");
    const deactive = document.querySelector(".et_pb_tab_1");
    const year = document.querySelector(".year");
    const month = document.querySelector(".month");

    active.addEventListener('click',() => {
        month.style.display = "block";
        year.style.display = "none";
    });
    deactive.addEventListener('click',()=> {
        year.style.display = "block";
        month.style.display = "none";
    });

</script>
    <style>
        .month{
            display: block;
        }
        .year{
            display: none;
        }
    </style>
</body>
</html>

score 0 · Answer 2 · answered Apr 06 '22 at 09:31

first of all you need to use your variables ( active , deactive, year, month ) and not repeat the extra document.getElementsByClassName. second of all you missed a "s" in getElementsByClassName and your onclick is camel cased. and by the way the result of getElementsByClassName is an array because its class and you should access the first Cell by using it like this : document.getElementsByClassName("active")[0].

Why this javacript code is not working? (Simple)

2 Answers2