addEventListener的Onclick事件不起作用

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：對象[object Object]的屬性'next'不是函數

Answer 1

當您在函數中添加括號時，函數將立即被調用，結果（在這種情況下為未定義）將返回到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);

addEventListener的Onclick事件不起作用

問題描述

2 個解決方案

解決方案1
3 已采納 2014-04-03 05:05:14

解決方案2
0 2014-04-03 05:06:28

addEventListener的Onclick事件不起作用

問題描述

2 個解決方案

解決方案1 3 已采納 2014-04-03 05:05:14

解決方案2 0 2014-04-03 05:06:28

解決方案1
3 已采納 2014-04-03 05:05:14

解決方案2
0 2014-04-03 05:06:28