Question

我是JS的新手，我遇到了一些问题。

所以我有这个JS文件：这个函数基本上是用不同的<div id="">重复的函数。

var button = document.getElementById("obj-trigger");

button.onclick = function () {
    var div = document.getElementById("obj-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("lineas-trigger");

button.onclick = function() {
    var div = document.getElementById("lineas-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("cultura-trigger");

button.onclick = function() {
    var div = document.getElementById("cultura-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("igualdad-trigger");

button.onclick = function() {
    var div = document.getElementById("igualdad-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("proyectos-trigger");

button.onclick = function() {
    var div = document.getElementById("proyectos-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("estigmas-trigger");

button.onclick = function() {
    var div = document.getElementById("estigmas-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("soy-trigger");

button.onclick = function() {
    var div = document.getElementById("soy-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

var button = document.getElementById("tudef-trigger");

button.onclick = function() {
    var div = document.getElementById("tudef-cont");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
};

当我使用所有函数时，它工作正常，但是如果我从HTML中删除<div>，让我们说：<div id="estigmas-trigger">，我的JS将一直工作直到它到达：

var button = document.getElementById("estigmas-trigger");

button.onclick = function() {
    var div = document.getElementById("estigmas-cont");
    if (div.style.display !== "none") {
        div.style.display = "none"
    }
    else {
        div.style.display = "block";
    }
};

下面的所有代码都将停止工作，因此不再崩溃。：（

为什么？并且......我该如何解决它？

Answer 1

这是因为如果没有带有id estigmas-trigger的元素，按钮将为null，并且你应该得到错误，你不能设置值onck on null，尝试添加一个检查来测试按钮是否为null：

var button = document.getElementById("estigmas-trigger");
if (button) {
    button.onclick = function() {
        var div = document.getElementById("estigmas-cont");
        if (div.style.display !== "none") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    };
}

Answer 2

一种方法是：

var button = document.getElementById("estigmas-trigger");
//that way you prevent define a function in a null object
if(button){
   button.onclick = function() {
       var div = document.getElementById("estigmas-cont");
       if (div.style.display !== "none") {
            div.style.display = "none";
       }
       else {
           div.style.display = "block";
       }
   };
}

Answer 3

导致您的错误是因为当您从HTML中删除某个元素，然后您的Javascript尝试在没有适当保护的情况下引用该元素时，会导致脚本错误，并且由于该错误，脚本会中止执行。

学习Javascript时（在学习如何编写第一个脚本之后），您需要做的第二件事是学习如何在浏览器中检查调试控制台中的错误。当你遇到执行错误而中止你的脚本时，它会告诉你，他们通常会告诉你错误发生在哪一行。

在这种情况下，您将尝试使用以下行来获取DOM元素：

var button = document.getElementById("estigmas-trigger");

然后，您将尝试使用button变量。但是，如果estigmas-trigger元素不在页面中，则button将为null，引用null的属性（例如{{1} }}

此外，您的代码非常重复。你真的不应该多次将几乎相同的代码复制到你的代码中。相反，创建一个可重用的函数并使用该函数多个地方，或者如果你的代码几乎完全相同，除了一个输入参数（你就是这种情况），那么你可以将一个输入参数放入一个数组并循环遍历阵列。

这里有更多DRY implementation（这取代了所有代码）：

.onclick

变更摘要：

将所有触发器ID值放入一个字符串数组中，这样您就可以遍历要应用相同代码的每个字符串。
使用var buttons = ["obj-trigger", "lineas-trigger", "cultura-trigger", "igualdad-trigger", "proyectos-trigger", "estigmas-trigger", "soy-trigger", "tudef-trigger"]; buttons.forEach(function(id) { var button = document.getElementById(id); if (button) { button.addEventListener("click", function(e) { var cont_id = this.id.replace("trigger", "cont"); var elem = document.getElementById(cont_id); if (elem) { var style = elem.style; if (style.display !== "none") { style.display = "none"; } else { style.display = "block"; } } }); } });循环遍历字符串数组。
获取每个id的DOM元素，并在尝试使用之前检查它是否存在（这将解决您的原始问题）。
使用.forEach()添加click事件处理程序，因为它比.addEventListener()更具可伸缩性，因为您可以通过这种方式为同一元素提供多个单击处理程序。切换到使用.onclick是一般习惯。
不是按名称引用.addEventListener() ID，而是使用简单的文本替换从xxx-cont ID派生它们。这样可以在代码中保存更多重复和输入。
获取DOM中的xxx-trigger对象，并在尝试使用它之前检查它是否存在（安全编码）。

删除一个<div>后，JavaScript无效

3 个答案: