javascript - 为什么我的 clickNumber 变量没有保存选定的 dom 元素？

<分区>

我需要制作一个计数器，将点击事件处理程序附加到递增按钮。必须有 2 个函数，并且变量必须在函数外声明。为什么它无法读取 clickNumber 的值？如果我在增量函数内声明该值，它就可以工作。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Counter</title>
    <script src="counter.js"></script>
</head>
<body>

<div>
    <button id="increment">Increment</button>
    <p id="counter">Counter = 0</p>


</div>


</body>
</html>

var counter = 0;
var clickNumber = document.getElementById("counter");



function getElementBtnIncrement() {

    document.getElementById("increment").addEventListener("click",increment,false);

}


function increment(){
    counter++;
    clickNumber.innerHTML = "Count = " + counter;
}



window.addEventListener( "load", getElementBtnIncrement, false );

最佳答案

counter.js 脚本正在文档 head 上加载，即在创建 #counter 元素之前。这意味着这段代码:

var clickNumber = document.getElementById("counter");

将导致 clickNumber 为 null(因为该元素尚不存在)。

您可以通过在加载 DOM 后分配 clickNumber 值来解决此问题:

var counter = 0;
var clickNumber; // still declared outside, but the value is assigned later



function getElementBtnIncrement() {

    document.getElementById("increment").addEventListener("click",increment,false);

}


function increment(){
    counter++;
    clickNumber.innerHTML = "Count = " + counter;
}



window.addEventListener( "load", function() {
  clickNumber = document.getElementById("counter");
  getElementBtnIncrement();
}, false );

关于javascript - 为什么我的 clickNumber 变量没有保存选定的 dom 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47382129/

上一篇：javascript - 表格/TD 边框不会显示在 echo td 上

下一篇：javascript - 使用 jQuery 防止回发并运行 OnClick

相关文章：

javascript - 按位置 angularjs 从现有图像中获取图像大小

Javascript 全局变量不起作用，而本地变量起作用

javascript - Replacewith 之后维护 jQuery onChange

javascript - 修复了 IE8 上的表头 <td> 宽度

javascript - module.exports 来自 promise

javascript - 模拟目录File对象

javascript - 尝试发布 AJAX 请求时出现 POST 405(方法不允许)-Laravel 4

javascript - 为什么 IE 无法加载某些图像？

javascript - 在正则表达式中，当字符不在其他字母字符中时如何查找和替换字符？

javascript - 像本例中那样一起使用时，.each 和 $(this) 的普通 Javascript 等价物是什么？