HTML JS返回错误“无法设置空值”

HTML JS returns error 'cannot set value of null'

本文关键字：设置 空值 JS 返回 错误 HTML      更新时间：2023-09-26

嗨，伙计们，我正在尝试使用innerHTML但它总是返回空错误。我按照论坛中的一些帮助在 html 之后加载 JS 部分。我尝试使用onload方法仍然失败。但是当我尝试使用 alert 时，该变量确实保留了该值。这是我正在使用的示例代码。

错误： 未捕获的类型错误： 无法将属性"innnerHTML"设置为 null

<div id="displayfacts"></div>
<div class="slideshow">
    <img id="i1" src="p1.jpg">
    <img id="i2" src="p2.jpg">
    <img id="i3" src="p3.jpg">
    <img id="i4" src="p4.jpg">
</div>

var islid=1;
var notices = new Array (       
    "The Vikings",       
    "Wolves",
    "Turn",
    "Smell");
window.onload = function slider() {
    document.getElementById("#displayfacts").innnerHTML = notices[islid];
    $(".slideshow #i"+islid+",#displayfacts").fadeIn(1000);
    $(".slideshow #i"+islid+",#displayfacts").delay(3000);
    $(".slideshow #i"+islid+",#displayfacts").fadeOut(2000);
    (islid<5)?islid++:islid=1;
    setTimeout(slider, 6000);
}

您将元素的 id 与元素的 CSS（和 jQuery）选择器混淆了它的 id。如果您有此元素：

<div id="displayfacts">...</div>

那么它的 id 只是"displayfacts"，而不是"#displayfacts"，所以你想在你的代码中使用document.getElementById('displayfacts');（注意没有 #）。

您当前正在尝试获取对 id #displayfacts的元素的引用（即 <div id="#displayfacts">...</div> ），它将返回 null（因为没有匹配的元素），因此当您尝试设置 innerHTML 属性时会出错。

如果我们看不到你的HTML很难帮助，但是检查js，似乎当你调用getElementById时，你正在使用"#displayfacts"，而它应该是"displayfacts"。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

另外，如果你正在使用jquery，为什么你使用getElementById？

innnerHTML - 正确地是带有 2 n 的 innerHTML。

试试这个：

var innerHTML =  "";
if(notices[islid] != null)
{
   innerHTML = notices[islid];
}
document.getElementById("#displayfacts").innerHTML = innerHTML;

代码中的两个问题

改变

document.getElementById("#displayfacts").innnerHTML = notices[islid];

to（删除#，因为 id displayfacts不#displayfacts）

document.getElementById("displayfacts").innnerHTML = notices[islid];

也改变 

(islid<5)?islid++:islid=1;

自

(islid<3)?islid++:islid=0; //since your array has only 4 elements

最终代码

var islid=0;
var notices = [  "The Vikings", "Wolves", "Turn", "Smell"];
window.onload = function slider() {
    $("#displayfacts").html( notices[islid] );//why not use jquery only
    $(".slideshow #i"+islid+",#displayfacts").fadeIn(1000);
    $(".slideshow #i"+islid+",#displayfacts").delay(3000);
    $(".slideshow #i"+islid+",#displayfacts").fadeOut(2000);
    (islid<3)?islid++:islid=0;
    setTimeout(slider, 6000);
}
相关文章：