Javascript 无法处理多行

Question

由于某种原因，我的 Javascript 代码无法工作。但是当我删除一些 Javascript 行时，它工作正常。

我做错了什么？

HTML:

<span id="21" class="addon-price">€ 0,00 p.m.</span>
<span id="57" class="addon-price">€ 0,00 p.m.</span>

Javascript:

document.getElementById("17").innerHTML = "Gratis";
document.getElementById("18").innerHTML = "Gratis";
document.getElementById("19").innerHTML = "Gratis";
document.getElementById("20").innerHTML = "Gratis";
document.getElementById("21").innerHTML = "Gratis";
document.getElementById("47").innerHTML = "Gratis";
document.getElementById("52").innerHTML = "Gratis";
document.getElementById("57").innerHTML = "Gratis";
document.getElementById("62").innerHTML = "Gratis";

JSFiddle:https://jsfiddle.net/4e362pg3/5/

Answer 1

打开控制台。

Uncaught TypeError: Cannot set property 'innerHTML' of null

如果该元素在 DOM 中不存在，选择器将返回 null。 null.innerHTML 未定义，它会引发错误并使页面崩溃。

使用 jQuery 的解决方案(因为您在问题中使用了 jQuery 标签):

$("#17").html("Gratis);

即使“17”元素不存在，这也永远不会使页面崩溃。