如何使用JavaScript检查页面上元素的存在？

Question

我在工作中遇到了一个问题，遇到了一个错误。

错误 ： 错误图像

代码：

const open_menu = document.querySelector("#open-menu");
const close_menu = document.querySelector("#close-menu");
const nav_box = document.querySelector(".nav-box");
const eye_slash = document.querySelector(".fa-eye-slash");
const eye = document.querySelector(".fa-eye");

open_menu.addEventListener("click",function (){nav_box.classList.remove("off")});
close_menu.addEventListener("click",function (){nav_box.classList.add("off")});

eye_slash.addEventListener("click",function (){
    document.querySelector("#password").type = "password";
});

const swiper = new Swiper('.swiper', {
    direction: 'horizontal',
    loop: true,
    autoplay: {
        delay: 4000,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

我想知道如何解决这个问题。因为我已经面对了很多问题。

Answer 1

当找不到元素时，document.queryselector将返回null。因此，您可以检查变量是否等于NULL。

var open_menu = document.querySelector("#open-menu")
…
if (open_menu != null) {
  open_menu.addEventListener("click", …)
} else {
  // the open_menu element doesn't exist
}

然后重复需要使用的每个元素。

或者，如果您使用的是javaScript的较新版本，则可以使用可选的链接。

open_menu?.addEventListener("click", …)

缺点是，如果Open_Menu是 无效的。