is style.display = “none”; breaking my javascript code?

Question

I am trying to build a website and have run into a problem with style.display. I have a similar piece of code in it that works fine and am thus stuck.

I've tried "isolating" both the working and non working code into seperate html files in an attempt to try and find out what is wrong and have tried adding a document.write("hello world") in the javascript file in an attempt to debug it however the tet doesn't show up.

Upon looking into the problem it appears that the issue is with the very first .style.display = "none"; code (the one not in a function) in the javascript code as if you remove it the hello world text shows up however the functions still don't work. This doesn't make sense to me as the working code doesn't have an issue with the style.display and thus I came over to stack exchange after browsing arround to no avail.

The not working html and javascript code is below (the other 5 functions are essentially repeats so they weren't included)

<h1>Activities</h1>
<div class="Activities_Holder">
    <div class="Activities_Btns">
        <input type="button" value="Activities" id="Activities" onclick="ActivitiesButton()"><!--
        --><input type="button" value="Joint Events" id="JE" onclick="JEButton()"><!--
        --><input type="button" value="Movie Nights" id="MN" onclick="MNButton()"><!--
        --><input type="button" value="Socials" id="Socials" onclick="SocialsButton()"><!--
        --><input type="button" value="SocSport" id="SocSport" onclick="SocSportButton()"><!--
        --><input type="button" value="Trips" id="Trips" onclick="TripsButton()">
    </div>
    <div class="Activities_Paragraphs">
        <p class="Activities_Text">Activities</p>
        <p class="JE_Text">JE</p>
        <p class="MN_Text">MN</p>
        <p class="Socials_Text">Socials</p>
        <p class="SocSport_Text">SocSport</p>
        <p class="Trips_Text">TripsText</p>
    </div>
    <script src="Activities.js"></script>
</div>

var a = document.getElementById("Activities_Text");
var j = document.getElementById("JE_Text");
var m = document.getElementById("MN_Text");
var s = document.getElementById("Socials_Text");
var ss = document.getElementById("SocSport_Text");
var t = document.getElementById("Trips_Text");

j.style.display = m.style.display = s.style.display = ss.style.display = t.style.display = "none";

document.write("hi");

function ActivitiesButton() {
    if (a.style.display === "none") {
        a.style.display = "block";
        j.style.display = m.style.display = s.style.display = ss.style.display = t.style.display = "none";
    }
}

The working code is below

<div class="Intro"><!-- container for intro/about section -->
    <div class="About">
        <h1>Intro / About</h1>
        <p id="About_Text">About Text</p>
        <p id="Comittee_Text">Comittee text here</p>
        <p id="Sponsors_Text">Sponsor text here</p>
    </div>
    <span>
        <div class="About_btns">
            <input type="button" value="Comittee" id="Comittee" onclick="ComitteeButton()"><!--
            --><input type="button" value="Sponsors" id="Sponsors" onclick="SponsorsButton()">
        </div>
    </span>
    <script src="About.js"></script>
</div>

var x = document.getElementById("About_Text");
var y = document.getElementById("Comittee_Text");
var z = document.getElementById("Sponsors_Text");
y.style.display = z.style.display = "none";

function ComitteeButton() {
    if (y.style.display === "none") {
        y.style.display = "block";
        x.style.display = z.style.display = "none";
        document.getElementById("Comittee").value = "About";
        document.getElementById("Sponsors").value = "Sponsors";
    }
    else {
        y.style.display = z.style.display = "none";
        x.style.display = "block";
        document.getElementById("Comittee").value = "Comittee";
        document.getElementById("Sponsors").value = "Sponsors";
    }
}

function SponsorsButton() {
    if (z.style.display === "none") {
        z.style.display = "block";
        x.style.display = y.style.display = "none";
        document.getElementById("Comittee").value = "Comittee";
        document.getElementById("Sponsors").value = "About";
    }
    else {
        z.style.display = y.style.display = "none";
        x.style.display = "block";
        document.getElementById("Comittee").value = "Comittee";
        document.getElementById("Sponsors").value = "Sponsors";
    }
}

The code is supposed to have 6 buttons and paragraph text underneath. On loading, only the Activities paragraph should be visible - the other paragraphs should be hidden. Upon pressing on the relevant button, the previously shown text should be hidden and the corresponding text should show up instead. This isn't happening for me - all six paragraphs are shown at once and the buttons do nothing.

Thank you in advanced for your time.

Answer 1

You are using getElementById , but not passing id, instead of Id you are passing class name.

        <p class="Activities_Text">Activities</p>
        <p class="JE_Text">JE</p>
        <p class="MN_Text">MN</p>
        <p class="Socials_Text">Socials</p>
        <p class="SocSport_Text">SocSport</p>
        <p class="Trips_Text">TripsText</p>


var a = document.getElementById("Activities_Text");
var j = document.getElementById("JE_Text");
var m = document.getElementById("MN_Text");
var s = document.getElementById("Socials_Text");
var ss = document.getElementById("SocSport_Text");
var t = document.getElementById("Trips_Text");

In this case, all variable will be null and will throw error if you try to use any property.

Instead of using getElementById , you can use getElementsByClassName .