Question

var fbToggle = document.getElementById("fbToggle");

以及稍后的脚本

fbToggle.addEventListener("click", toggle("fbContainer"));

控制台告诉我fbToggle是NULL

这是在文件中。

<input type="checkbox" id="fbToggle">

之前我没有使用过eventListener，所以也许有一个特殊的声明顺序我不知道了吗？

编辑：

整个js：

function toggle(target) {
var obj = document.getElementById(target);
display = obj.style.display;
if (display == "none") {display = "block"}
else {display = "none"}
}

function init() {
var fbToggle = document.getElementById("fbToggle");
var twitToggle = document.getElementById("twitToggle");
var pinToggle = document.getElementById("pinToggle");   
console.log(fbToggle); // NULL
fbToggle.addEventListener("click", toggle("fbContainer"));
twitToggle.addEventListener("click", toggle("twitContainer"));
pinToggle.addEventListener("click", toggle("pinContainer"));
}

window.onload = init();

HTML太长了。但是JS是从外部文件调用的。我也不是怪异模式。

Answer 1

目前尚不清楚脚本＆＃34;是。如果它在不同的范围内肯定不会起作用。建议您尽可能将所有内容保存在全局对象中，以便可以从脚本中的不同位置进行访问。

window.globals = {};
window.globals.fbToggle = document.getElementById("fbToggle");


window.globals.fbToggle.addEventListener("click", function () {
    toggle("fbContainer")
});

function toggle(container) {
    alert(container);
}

http://jsfiddle.net/ST938/

另一点是addEventListener期望函数或函数标识符，而不是函数调用。

addEventListener("click", toggle("fbContainer"));  // wrong
addEventListener("click", toggle);  // correct

所以如果你想传递一个参数

window.globals.fbToggle.addEventListener("click", function () {
    toggle("fbContainer")
});

function toggle(container) {
    alert(container);
}

Answer 2

在JavaScript中，在函数名后面加上括号会导致调用它。如果要在不调用函数的情况下引用函数，则不得在名称后面加上括号：

window.onload = init(); // this calls init() immediately
window.onload = init; // this correctly stores init in window.onload

同样适用于toggle()。如果您需要预先指定一些参数，可以将它包装在匿名函数中：

fbToggle.addEventListener("click", function() { toggle("fbContainer"); });

或者您可以使用bind：

fbToggle.addEventListener("click", toggle.bind(null, "fbContainer"));

可能是moronic js语法错误。对象为空

2 个答案: