是 style.display = "none"；破坏我的 javascript 密码？

Question

我正在尝试建立一个网站，运行遇到了 style.display 的问题。我有一段类似的代码可以正常工作，因此卡住了。

我已经尝试 "isolating" 将工作代码和非工作代码都放入单独的 html 文件中，试图找出问题所在，并尝试添加 document.write ("hello world") 在 javascript 文件中试图对其进行调试，但是 tet 没有出现。

调查问题后发现问题出在第一个 .style.display = "none"; javascript 代码中的代码（不在函数中的那个）就好像你删除它一样，你好世界文本出现了，但是这些函数仍然不起作用。这对我来说没有意义，因为工作代码没有 style.display 的问题，因此我在浏览了 arround 无济于事后过来进行堆栈交换。

不工作的 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，而是 class 名称。

        <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，如果您尝试使用任何属性.

将抛出错误

您可以使用 getElementsByClassName。

而不是使用 getElementById

是 style.display = "none"；破坏我的 javascript 密码？

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

html

javascript

hide