是style.display =“ none”; 破壞我的JavaScript代碼？

Question

我正在嘗試建立一個網站，並且遇到了style.display問題。 我有一段類似的代碼可以正常工作，因此被卡住了。

我嘗試將工作代碼和非工作代碼“隔離”到單獨的html文件中，以嘗試找出問題所在，並嘗試在javascript文件中添加document.write（“ hello world”）進行調試，但不會顯示tet。

在研究問題時，似乎問題出在第一個.style.display =“ none”;。 javascript代碼中的代碼（不在函數中的代碼），就好像您將其刪除時，會顯示hello world文本，但函數仍無法正常工作。 這對我來說沒有任何意義，因為工作代碼對style.display沒有問題，因此在瀏覽了無濟於事后，我來到了堆棧交換。

下面是無法正常工作的html和javascript代碼（其他5個函數本質上是重復的，因此未包括在內）

<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";
    }
}

工作代碼如下

<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";
    }
}

該代碼應該在下面有6個按鈕和段落文本。 加載時，僅“活動”段落應可見-其他段落應隱藏。 按下相關按鈕后，先前顯示的文本應被隱藏，而應顯示相應的文本。 對我而言，這不是真的-一次顯示所有六個段落，按鈕不起作用。

在此先感謝您的寶貴時間。

Answer 1

您正在使用getElementById ，但沒有傳遞ID，而是傳遞了類名，而不是Id。

        <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");

在這種情況下，如果您嘗試使用任何屬性，則所有變量將為null並會引發錯誤。

而不是使用getElementById ，您可以使用getElementsByClassName 。