Question

<script type="text/javascript">
    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";
      }
    }
</script>

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

这些照片的ID是：“appel”，“Peer”，“Banaan”。

当图片获得“zichtbaar”类时 - ＆gt; display: block;当他们上课时“verstopt” - ＆gt; display:none;

第一个if/else语句工作正常：它在显示时隐藏，并显示隐藏的时间。

但即使第二个if语句确实被触发（我已经测试了这个），其他图片也不会被隐藏。（图片Peer和Banaan）

是的，我知道我仍然必须为每张照片做最后的if语句3x;）

Answer 1

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

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

    item.className="zichtbaar";

 }

Answer 2

您在页面仍在加载时正在调用getElementById。由于DOM中尚未提供appel peer和banaan，因此函数返回null。

您可以通过将脚本元素放在正文的底部来解决此问题。

您还可以将脚本包装在一个在加载页面时调用的函数中。

以下示例：

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

javascript

2 个答案: