gpt4 book ai didi

javascript - 未捕获的类型错误 : Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array

转载 作者:行者123 更新时间:2023-11-28 07:38:20 29 4
gpt4 key购买 nike

在下面的代码中,我尝试以不将猫名称硬编码到 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);

})();

最佳答案

我对你的代码做了一些更改(实际上,我的目的是让这些行并使单个变量声明更具可读性。

错误出现在您使用的 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>

关于javascript - 未捕获的类型错误 : Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28332778/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com