Javascript document.getElementById返回空值
您好，我有这些部门： 英国地图 我想通过在屏幕上有三个按钮并单击来隐藏两个div，而只显示一个Javascript document.getElementById返回空值,javascript,html,Javascript,Html,您好，我有这些部门： 英国地图 我想通过在屏幕上有三个按钮并单击来隐藏两个div，而只显示一个 button id="userButton" onclick ="showOnClick('layoutGroup1');">ECA </button 上面是我使用的函数，尽管它给了我一个错误，即getElementByID为null。 函数ShowOnClick元素{ ifelement=='layoutGroup1'{ document.getElementById'layoutGr
button id="userButton" onclick ="showOnClick('layoutGroup1');">ECA </button
虽然您没有为这个问题指定jQuery，但是有一种非常简单的jQuery方法。有三个按钮，每个按钮都有一个与div相对应的值。然后在onclick事件中，通过删除内联点击处理程序（更好的代码结构），注意javascript与html的分离，您只需获得点击按钮的值，使用公共类隐藏所有div，然后使用其id显示所需的div。这也可以通过添加/删除隐藏的类来完成，例如hidden{display:none}，也可以使用普通javascript完成，但所有这些if都是。。。。请注意，我在div2和div3中添加了一些文本，以便可以看到它们在各自的按钮点击上切换 另外请注意，我并不建议为这一个函数加载整个jQuery库——这一小函数的权重太大了，而只是提供了一个选项，允许一个小函数成为更大的代码结构的一部分 $document.readyfunction{ $'.showDiv'。单击函数{ var元素=$this.val； $'.layoutGroups'.hide； $'layoutGroup'+element.show； } } 1. 2. 3. 英国地图 树 地图 为HTML中的元素从getElementById获取null 通过调用getElementById获取null的具体问题可能是由于在完全加载页面的HTML之前运行JavaScript造成的，即DOM中还不存在元素，因此为null。然而，虽然这可能是问题所在，但我们无法知道这是问题所在，因为您的问题没有向我们显示HTML和JavaScript之间的关系，即，它没有显示如何以及何时在页面中加载/运行JavaScript 在页面中的元素可用之前运行JavaScript的问题的解决方案是延迟JavaScript的执行，直到。有多种方法可以做到这一点。一种是将标签放在HTML的底部。但是，延迟页面加载通常是通过将代码或初始化代码包装到一个函数中来完成的，该函数随后被指定为在准备就绪的各个阶段触发的各种事件之一的侦听器。最常用的是的。可以使用以下代码执行此操作：
//Wait to run your initialization code until the DOM is fully loaded. This is needed
// when wanting to access elements that are later in the HTML than the <script>.
if(document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', afterLoaded);
} else {
//The DOMContentLoaded event has already fired. Just run the code.
afterLoaded();
}
afterLoaded() {
//Your initialization code goes here. This is from where your code should start
// running if it wants to access elements placed in the DOM by your HTML files.
// If you are wanting to access DOM elements inserted by JavaScript, you may need
// to delay more, or use a MutationObserver to see when they are inserted.
});
包装此代码或在window.onload中调用showOnClick…它应该可以工作为什么在if语句体中使用equal语句==而不是=呢？我想您应该设置style.display而不是compare。您是否在尝试在JS中访问HTML元素之后加载JS脚本？是的，您是对的。感谢您的注意？虽然jQuery有许多方便的功能，但您可以使用更多的字符，使代码在功能上与股票JavaScript相同。对于这个jQuery解决方案，一个快速的、非优化的、逐行等效的JavaScript实现需要大约338个字符，而jQuery需要149个字符，可以节省189个字符。适度的大小优化可以将JavaScript版本减少到307个字符，比同等的jQueryES6节省了大约50个额外的JavaScript字符多111个。没有可用的jQuery并不意味着你不应该考虑类似的问题。是的，谢谢你的建议，我正在使用javascript，不幸的是没有提到它。是的，谢谢你。我的函数的问题是意外地使用了double==将显示值分配给divs。非常感谢你提供了有用的答案。