未被捕獲的TypeError：將innerhtml設置為數組中的字符串時，無法設置null的屬性“ innerHTML”

Question

在下面的代碼中，我試圖以不將其硬編碼到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>

使用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：將innerhtml設置為數組中的字符串時，無法設置null的屬性“ innerHTML”

問題描述

1 個解決方案

解決方案1
0 已采納 2015-02-04 22:34:39

未被捕獲的TypeError：將innerhtml設置為數組中的字符串時，無法設置null的屬性“ innerHTML”

問題描述

1 個解決方案

解決方案1 0 已采納 2015-02-04 22:34:39

解決方案1
0 已采納 2015-02-04 22:34:39