javascript中.className的问题 var appel=document.getElementById（“appel”）； var Banaan=document.getElementById（“Banaan”）； var Peer=document.getElementById（“Peer”）； 函数laatZien（divID）{ var item=document.getElementById（divID）； 如果（item.className==“verstopt”）{ item.className=“zichtbaar”； }否则{ item.className=“verstopt”； } 如果（divID==“appel”）{ 警报（“hoi”）； Peer.className=“verstopt”； Banaan.className=“verstopt”； } }

在我的页面上，我有3张带有3个按钮的图片，当按下其中一个按钮时，必须出现一张图片，但其他图片必须消失

这些图片的id是：“appel”、“Peer”、“Banaan”

当图片得到类“zichtbaar”->

显示：块
时，显示：无

第一个
if/else
语句工作正常：显示时隐藏，隐藏时显示

但即使第二个if语句被触发（我已经测试过了），其他的图片也不会被隐藏

是的，我知道我仍然必须为每张图片执行最后一个if语句3x；）
 当页面仍在加载时，您正在调用
getElementById
。因为appel peer和banaan在DOM中还不可用，所以函数返回
null

您可以通过将script元素放在正文的底部来解决这个问题

您还可以将脚本包装到一个函数中，该函数在加载页面时被调用

示例如下：

function laatZien(divID) {
    var item = document.getElementById(divID);

    appel.className="verstopt";
    Banaan.className="verstopt";
    Peer.className="verstopt";

    item.className="zichtbaar";

 }

您需要将脚本向下移动，在元素下方，在
标记的正上方。您能解释一下为什么会这样吗？感谢btwIt，因为您在函数外部使用了
getElementById
，要使其正常工作，元素必须存在于DOM中，因此它们必须在脚本标记之前。在脚本执行时，元素还没有出现在DOM中，浏览器只是在加载它们。另一个更好的解决方案是在头部安装一个文档就绪的事件监听器。您可以在任何地方编写javascript，然后也请发布您的html，这样我们就可以看到您的脚本在哪里/何时被调用
function laatZien(divID) {
    var item = document.getElementById(divID);

    appel.className="verstopt";
    Banaan.className="verstopt";
    Peer.className="verstopt";

    item.className="zichtbaar";

 }

addEventListener('load', function () {
var appel = document.getElementById("appel");
var Banaan = document.getElementById("Banaan");
var Peer = document.getElementById("Peer");

function laatZien(divID) {
    var item = document.getElementById(divID);
    if (item.className == "verstopt") {
        item.className = "zichtbaar";
    } else {
        item.className = "verstopt";
    }
    if (divID == "appel") {
        alert("hoi");
        Peer.className = "verstopt";
        Banaan.className = "verstopt";
    }
}
}, false);