Peculiar circumstance for my: "Uncaught TypeError: Cannot set property 'innerHTML' of null"

Question

来玩吧... 点击猫！

    <div id="bigBox" class="noselect">
        <div id="litterBox1" class="noselect">

        </div>

        <div id="clickBox" class="noselect">
            <div id="clicks1" class="noselect">Deuce</div>  
            <div id="clicks2" class="noselect">Mack</div> 
        </div>

        <div id="litterBox2" class="noselect">

        </div>
    </div>

（我无法找到与我的 Javascript 上下文相似的解决方案。）

这是我第一次尝试 OO Javascript，并且...

经过多次兜售、重写和编辑，我仍然无法确定是什么导致了 "Uncaught TypeError: Cannot set property 'innerHTML' of null"。

如有任何帮助，我们将不胜感激！

var numClicks = 0;
var litterBox1 = document.getElementById("litterBox1");
var litterBox2 = document.getElementById("litterBox2");

var clickBox1 = document.getElementById("clicks1");
var clickBox2 = document.getElementById("clicks2");
var catName1 = "Deuce";
var catName2 = "Mack";


function Cat(catName, clickbox, litterBoxNum, numClicks){
    this.catName = catName;
    this.clickbox = clickbox;
    this.litterBoxNum = litterBoxNum;
    this.numClicks = numClicks;
}

Cat.prototype.cntClicks = function(){
    numClicks++;
    document.getElementById("letsPLay").style.display = "none";
    document.getElementById(this.clickbox).innerHTML = this.catName + " has " + this.numClicks + " cat-clicks!";
};



var deuce = new Cat(catName1, clickBox1, litterBox1, numClicks);
var mack = new Cat(catName2, clickBox2, litterBox2, numClicks);

catName1.onclick = deuce.cntClicks();
catName2.onclick = mack.cntClicks();

Answer 1

您的代码有几个问题，但您收到错误的是在您的 Cat.cntClicks 函数中。您正在尝试通过调用 document.getElementById 访问 DOM 元素 return 的 innerHTML 属性，这可以 return null - 这实际上是returned 在你的情况下作为参数传递给它的 this.clickbox 是 DOM 元素本身而不是 ID。

因此，按以下方式更改此行将解决您的问题并引导您进入下一个问题:-)

this.clickbox.innerHTML = this.catName + " has " + this.numClicks + " cat-clicks!";

Peculiar circumstance for my: "Uncaught TypeError: Cannot set property 'innerHTML' of null"

Peculiar circumstance for my: "Uncaught TypeError: Cannot set property 'innerHTML' of null"

javascript

oop

javascript-objects