Uncaught TypeError: Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array
Question
In the following code I am trying to set the cat names in a way that doesn't hardcode them to the 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. I don't know why it doesn't evaluate that array and find the string and put that on the page.
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);
})();
1 answers
solution1
0 ACCPTED 2015-02-04 22:34:39
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. Specifically, in your HTML code you define the id creatname1 and you try to select the element with 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.