My separated javascript file does not show anything from ID, but works when on the body tag

Question

I'm trying to make some tabbed content on my HTML code with an external js file

here is my code:

<!DOCTYPE html>
<head></head>
<body>
<div class="tab">
    <button class="tablinks" onclick="openSection(event, 'idNo1')" id="defaultOpen">NO1</button>
    <button class="tablinks" onclick="openSection(event, 'idNo2')">NO2</button>
    <button class="tablinks" onclick="openSection(event, 'idNo3')">NO3</button>
</div>

<!--NO1Section-->
<section id="idNo1" class="tabcontent">
    <div>
        guheheheheh
    </div>
</section>

<!--NO2Section-->
<section id="idNo2" class="tabcontent">
    <div>
        mwehehehehehe
    </div>
</section>

<!--NO3Section-->
<section id="idNo3" class="tabcontent">
    <div>
        nyehehehehe
    </div>
</section>

<script src="vscript.js"></script>
</body>
</html>

this is my external js :


    //tabcontent
    function openSection(evt, docName) {
        var i, tabcontent, tablinks;
    
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i=0; i < tabcontent.length; i++)
            {
                tabcontent[i].style.display = "none";
            }
    
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++)  
            {
                tablinks[i].className=tablinks[i].className.replace(" active", "");
            }
        
            document.getElementById(docName).style.display="block";
            evt.currentTarget.className += " active" ;
    }
        document.getElementById("defaultOpen").click();

document.getElementById("defaultOpen").click(); works when I put it on body tag, but when I try separate it on external js, HTML doesn't show anything.

try using document.querySelectorAll instead of document.getElementsByClassName, it worked for me — Junaid Shaikh, Oct 10 '22 at 11:27
If you have this the vsscript.js has to be in the same folder where the html code is. Try to put a console log to see if openSection() is called for example. — Marius Danciu, Oct 10 '22 at 11:39
There is no way the code works because `btnNo1` does not match `idNo1` `onclick="openSection(event, 'idNo1')"` — epascarello, Oct 10 '22 at 12:35
Use the [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) interface to add and remove classes rather than trying to do it on your own. — Heretic Monkey, Oct 10 '22 at 12:36

My separated javascript file does not show anything from ID, but works when on the body tag

0 Answers0