Question

检查此代码：

<script>
var next = document.getElementById("next");
var prev = document.getElementById("prev");

next.addEventListener("click",next(),false);
prev.addEventListener("click",prev(),false);

function next(e) {
e.preventDefault();
prev.style.display = "block";
next.style.display = "none";
}
function prev(e) {
e.preventDefault();
prev.style.display = "none";
next.style.display = "block";
}
</script>

<div id="nav">
<a href="javascript:void;" id="prev">&lsaquo;&lsaquo;&lsaquo;</a>
<a href="javascript:void;" id="next">&rsaquo;&rsaquo;&rsaquo;</a>
</div>

我不知道为什么这不起作用。我在<body>标记之前加载脚本。请帮忙。

它给了我错误：未捕获的TypeError：属性＆＃39; next＆＃39;对象[object Object]不是函数

Answer 1

将括号添加到函数中时，会立即调用函数，并将结果（在本例中为undefined）返回给addEventListener。

您想要引用这些功能，而不是调用它们

next.addEventListener("click", next, false);
prev.addEventListener("click", prev, false);

下一个错误是你为变量和函数使用相同的名称，所以当你说next.style它现在是函数，而不是元素，因为函数名称会覆盖变量

var next_elem = document.getElementById("next");
var prev_elem = document.getElementById("prev");

next_elem.addEventListener("click", next_fn, false);
prev_elem.addEventListener("click", prev_fn, false);

function next_fn(e) {
    e.preventDefault();
    prev_elem.style.display = "block";
    next_elem.style.display = "none";
}

function prev_fn(e) {
    e.preventDefault();
    prev_elem.style.display = "none";
    next_elem.style.display = "block";
}

Answer 2

您需要提及功能名称。通过指定()以及函数名称，可以调用它们。

将其更改为：

next.addEventListener("click",next,false);
prev.addEventListener("click",prev,false);

Onclick事件使addEventListener无法正常工作

2 个答案: