Question

我无法弄清楚为什么我的代码只有在我调用了一个没有存储在变量中的文档元素之后才能工作。我试图将一些DOM引用存储到变量中，但我的代码不会与DOM交互，除非我在我试图存储的DOM元素上执行操作。但是，在我对单个DOM元素执行操作之后，我的其他变量将允许与我最初预期的DOM接口。我正在链接两个JSFiddles，第一个是带错误的，第二个带创可贴修复。下面是突出显示更改位置的JavaScript代码。感谢。

https://jsfiddle.net/spencerduball/sLac9t3y/

https://jsfiddle.net/spencerduball/yyrjazLw/

(function() {
/* ----- VARIABLES ----- */
var score0, score1, current0, current1;

scoreO = document.getElementById('score-0');
score1 = document.getElementById('score-1');

current0 = document.getElementById('current-0');
current1 = document.getElementById('current-1');


/* ----- FUNCTIONS ----- */
function reset() {
    // BANDAID FIX HERE
    document.getElementById('score-0').textContent = '0';
    // END

    score1.textContent = '0';
    current0.textContent = '0';
    current1.textContent = '0';

};
reset();

}());

Answer 1

您的变量声明为score0。

var score0, score1, current0, current1;

但是你要分配给scoreO。（资本“O”而不是数字零。）

scoreO = document.getElementById('score-0');

有些解决方案是：

不要预先声明变量，因为你无论如何都要立即进行分配

var score0 = document.getElementById('score-0');
// same for the others

使用“严格模式”获取有关未声明变量分配的有用错误消息
```
(function() { 
  "use strict";
  /* ----- VARIABLES ----- */
```
使用ESLint或JSHint等字符。这些将通知您许多不同类型的常见编程错误，并且从长远来看将为您节省批次。

JavaScript缓存DOM元素奇怪的错误

1 个答案: