querySelectorAll无法正常工作?

时间:2015-09-30 09:07:30

标签: javascript html5

这是我的javascript代码:

function answer(){
var list = document.querySelectorAll("#fish");
list[1].onclick = talk();
}

function talk(){
alert('hello!');
}

window.onload = answer();

在运行时,它会弹出我的浏览器窗口,提示:'hello'。 我的HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<script src="new 3x.js"></script>
</head>
<body>
<section>
<p id="fish">hello world!</P>
<p id="fish">tuna</P>
<p id="stuff">durr</P>
</section>
</body>
</html>

它在加载tab时发出问候语。我希望它在点击金枪鱼时运行警报!

2 个答案:

答案 0 :(得分:1)

您没有正确分配事件处理程序 - 您正在分配调用函数的结果,而不是函数本身。删除() s:

function answer(){
var list = document.querySelectorAll("#fish");
list[1].onclick = talk;
}

function talk(){
alert('hello!');
}

window.onload = answer;

目前正在发生的事情是,只要window.onload = answer();行被点击,您就会立即运行answer功能。当它到达onclick行时,它会立即调用talk函数。那不是你想要的。

答案 1 :(得分:0)

如果您使用ID,为什么首先使用querySelectorAll?只需使用getElementById。

var list = document.getElementById("fish");
list.addEventListener('click', talk, false);

修改

现在我看到你使用的是非唯一ID,我认为这是不好的做法。为什么不使用班级fish

<p class="fish">hello world!</P>
<p class="fish">tuna</P>
<p id="stuff">durr</P>

然后选择如下:

var list = document.querySelectorAll(".fish");
list[0].addEventListener('click', talk, false);