Javascript getElementById返回元素，但随后返回null

所以我试图在我的JS中设置一些DOM元素的引用。但是，由于某些原因，它们返回正确的元素，但不久之后返回null。因此，我尝试将它们包装在if检查中，以确保元素不为null，从而防止出现这种情况。然而，这似乎仍在发生

resizer.js

// Define DOM elements
const resizer = document.getElementById('resizer');
let btnMob;
let btnTablet;
let btnLaptop;
let btnDesktop;

// Check buttons exist and asign to variables if they do
if (document.getElementById('resizer-mob') !== null) {
    btnMob = document.getElementById('resizer-mob');
}
if (document.getElementById('resizer-tablet') !== null) {
    btnTablet = document.getElementById('resizer-tablet');
}
if (document.getElementById('resizer-laptop') !== null) {
    btnLaptop = document.getElementById('resizer-laptop');
}
if (document.getElementById('resizer-desktop') !== null) {
    btnDesktop = document.getElementById('resizer-desktop');
}

// Define string constants
const DESKTOP_CLASS = 'resizer--desktop';
const LAPTOP_CLASS = 'resizer--laptop';
const TABLET_CLASS = 'resizer--tablet';
const MOB_CLASS = 'resizer--mob';

// Check elements have been asign correctly
console.log('mob is ', btnMob);
console.log('tablet is ', btnTablet);
console.log('laptop is ', btnLaptop);
console.log('desktop is ', btnDesktop);


// Update resizer to display desktop
btnDesktop.addEventListener('click', () => {
    console.log("DESKTOP");
    resizer.classList.remove(LAPTOP_CLASS);
    resizer.classList.remove(TABLET_CLASS);
    resizer.classList.remove(MOB_CLASS);

    resizer.classList.add(DESKTOP_CLASS);
});

// Update resizer to display laptop
btnLaptop.addEventListener('click', () => {
    console.log("LAPTOP");
    resizer.classList.remove(DESKTOP_CLASS);
    resizer.classList.remove(TABLET_CLASS);
    resizer.classList.remove(MOB_CLASS);

    resizer.classList.add(LAPTOP_CLASS);
});

// Update resizer to display tablet
btnTablet.addEventListener('click', () => {
    console.log("TABLET");
    resizer.classList.remove(DESKTOP_CLASS);
    resizer.classList.remove(LAPTOP_CLASS);
    resizer.classList.remove(MOB_CLASS);

    resizer.classList.add(TABLET_CLASS);
});

// Update resizer to display mobile
btnMob.addEventListener('click', () => {
    console.log("MOB");
    resizer.classList.remove(DESKTOP_CLASS);
    resizer.classList.remove(LAPTOP_CLASS);
    resizer.classList.remove(TABLET_CLASS);

    resizer.classList.add(MOB_CLASS);
});

---

你试过了吗而不是！==？ 它返回null还是未定义

如果未定义，则需要使用：

typeof(element) != 'undefined'

---

代码的行为符合预期。第一次运行代码时，一切正常，因为您没有删除任何元素。第二次出现时，一些元素返回

null

，因为它们不再存在。

这一点很不清楚

document.getElementById

适用于世界上的每一个浏览器，因此如果它告诉ID不在页面上，那是因为它不在页面上（这就是它不返回元素时的含义）。另外，在你的帖子里没有问题：你希望得到什么答案？我知道。这就是为什么这让我感到困惑。元素是存在的。我可以在屏幕上看到它们。但由于某些原因，在大约1s后，它们都返回null:：就答案而言，我希望有人能看到我在这里做错了什么。这是非常基本的，这很可能让人恼火，因为脚本是在元素插入DOM之前运行的，您知道HTML页面上的顺序很重要吗？脚本在页面中的什么位置？我打赌脚本在标题中，意思是在正文之前；）尝试将其插入正文结束标记之前。脚本位于页脚中。元素在最初找到它们时就存在，但随后又以null的形式返回它们，除非我没有删除任何元素。它们仍然在DOM中，我可以看到它们