未捕获的类型错误:将 innerhtml 设置为数组中的字符串时，无法设置 null 的属性 'innerHTM

Uncaught TypeError: Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array

本文关键字：设置 null 属性 innerHTM 字符串 数组 错误 类型 innerhtml      更新时间：2023-09-26

在下面的代码中，我试图以一种不将它们硬编码到 html 的方式设置猫名。因此，我正在使用数组。但是每当我尝试将 innerHTML 属性设置为 catNames[0] 或 catNames[1] 时，我都会收到错误。我不知道为什么它不计算该数组并找到字符串并将其放在页面上。

.HTML

<html>
<head>
<title>Cat Clicker</title>
</head>

<body>
    <div>
    <!-- name -->
    <h1 id="creatname1">y</h1>
    <!-- clickable image -->
    <img id="cat" src="img/cat.jpg">
    <!-- text -->
    <p> You have clicked
        <strong id="counter1">0</strong> times
    </p>
    </div>

<div>
    <!-- name -->
    <h1 id="createname2">x</h1>
    <!-- clickable image -->
    <img id="cat2" src="img/cat2.jpg">
    <!-- text -->
    <p> You have clicked <strong id="counter2">0</strong> times</p>
</div>
<script src="js/app.js"></script>
</body>

爪哇语

                       (function(){
   var image = document.getElementById('cat'), image2=     
    document.getElementById('cat2'),
    clicks1= document.getElementById('counter1'),clicks2=                         
    document.getElementById('counter2'),
    counterNumber1=0, counterNumber2=0, catNames=["Javi","Esteban"], name1=    
    document.getElementById('createname1'), name2=  
    document.getElementById('createname2');
name1.innerHTML= catNames[0];
name2.innerHTML= catNames[1];
function imageClickHandler() {
    counterNumber1++;
    clicks1.innerHTML= counterNumber1;
}
function imageClickHandler2() {
    counterNumber2++;
    clicks2.innerHTML= counterNumber2;
}

image.addEventListener('click',imageClickHandler,false);
image2.addEventListener('click',imageClickHandler2,false);
})();

我已经对您的代码进行了一些更改（实际上，我打算使行和单个变量声明更具可读性。

错误出在您使用的id中。具体来说，在 HTML 代码中定义id creatname1并尝试选择具有 id createname1 的元素。

(function(){
   var image = document.getElementById('cat');
   var image2 = document.getElementById('cat2');
   var clicks1 = document.getElementById('counter1');
   var clicks2 = document.getElementById('counter2');
   var counterNumber1=0;
   var counterNumber2=0;
   var catNames=["Javi","Esteban"];
   var name1 = document.getElementById('createname1');
   var name2 = document.getElementById('createname2');
   name1.innerHTML= catNames[0];
   name2.innerHTML= catNames[1];
   function imageClickHandler() {
       counterNumber1++;
      clicks1.innerHTML= counterNumber1;
   }
   function imageClickHandler2() {
       counterNumber2++;
       clicks2.innerHTML= counterNumber2;
   }
image.addEventListener('click',imageClickHandler,false);
image2.addEventListener('click',imageClickHandler2,false);
})();
 <div>
    <!-- name -->
    <h1 id="createname1">y</h1>
    <!-- clickable image -->
    <img id="cat" src="img/cat.jpg">
    <!-- text -->
    <p> You have clicked
        <strong id="counter1">0</strong> times
    </p>
    </div>
<div>
    <!-- name -->
    <h1 id="createname2">x</h1>
    <!-- clickable image -->
    <img id="cat2" src="img/cat2.jpg">
    <!-- text -->
    <p> You have clicked <strong id="counter2">0</strong> times</p>
</div>

相关文章：