JavaScript 缓存 DOM 元素奇怪的错误

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 等 linter。这些将通知您许多不同类型的常见编程错误，从长远来看将为您节省大量时间。