Question

大家好我正在尝试使用innerHTML，但它总是返回null错误。我在论坛中提供了一些帮助，在html之后加载了JS部分。我尝试使用onload方法仍然失败了。但是当我尝试使用警报时，变量确实保留了该值。这是我正在使用的示例代码。

错误：未捕获的TypeError：无法设置null的属性'innnerHTML'

<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);
}

Answer 1

您的元素的ID与其ID的CSS（和jQuery）选择器的ID混淆。如果你有这个元素：

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

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

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

Answer 2

如果我们看不到您的HTML很难提供帮助，但是检查js，那么当您调用getElementById时，您应该使用“#displayfacts”，而它应该是“displayfacts”。

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

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

Answer 3

我 nnn erHTML - 正确的是带有2个n的innerHTML。

试试这个：

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

Answer 4

代码中的两个问题

变化

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

至（删除#，因为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);
}

HTML JS返回错误'无法设置null值'

4 个答案: