未被捕获的TypeError：将innerhtml设置为数组中的字符串时，无法设置null的属性“ innerHTML”

Question

In the following code I am trying to set the cat names in a way that doesn't hardcode them to the html. 在下面的代码中，我试图以不将其硬编码到html的方式来设置猫的名称。 Because of that I am using an array. 因此，我正在使用数组。 however whenever I try to set the innerHTML properties to catNames[0] or catNames[1] I get an error. 但是，每当我尝试将innerHTML属性设置为catNames [0]或catNames [1]时，都会出现错误。 I don't know why it doesn't evaluate that array and find the string and put that on the page. 我不知道为什么它不评估该数组并找到字符串并将其放在页面上。

HTML 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 使用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

I have changed a bit your code (actually, I intended the lines and make single variable declarations to be more readable. 我对您的代码进行了一些更改（实际上，我打算使行变得更清晰易懂。

The error was in the id you were using. 错误出在您正在使用的id中。 Specifically, in your HTML code you define the id creatname1 and you try to select the element with id createname1 . 具体来说，在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