Why this javacript code is not working? (Simple)

April 6, 2022

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>

>Solution :

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>