Question

在下面的代码中，我试图以不将它们硬编码为html的方式设置cat名称。因为我正在使用数组。但是每当我尝试将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>

的Javascript

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

})();

Answer 1

我已经改变了一些你的代码（实际上，我打算使用这些行并使单个变量声明更具可读性。

错误发生在您使用的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>

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;当将innerhtml设置为数组中的字符串时为null

1 个答案: