是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 。