Question

我尝试向cars3 id'd段添加一个事件监听器，这样当我单击该段时，它应该执行getValue（）方法，但它不起作用。我不明白为什么。谢谢。

<!DOCTYPE html>
<html lang="en">
 <head>

<script>     
function getValue()
   {
        var x=document.getElementById("cars").value;

        document.getElementById("cars2").innerHTML = x.toString();
    }

document.getElementById("cars3").addEventListener("click", getValue());

</script>

</head>

<body>

<h1 id="myHeader" onclick="getValue()">"CLICk HERE !" </h1>

<p id="cars3">afaf</p>

 <select id="cars" name ="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option></select> 
  </select>


<p id="cars2">afaf2</p>

</body>

</html>

Answer 1

删除括号：

addEventListener("click", getValue());
//--------------------------------^^

成功：

addEventListener("click", getValue);

被修改

同时将脚本标记移动到正文下方。您的代码不等待呈现页面，因此document.getElementById("cars3")无法获取元素。

<body>
  ...
</body>
<script>
function getValue()
  ...
<script>

Answer 2

这对我有用，你必须取出函数的“（）”，并使用文件的事件onload，因为当你的addeventlistener首次被调用时，html不存在，所以无法找到cars3元素。

<!DOCTYPE html>
<html lang="en">
 <head>

<script>     
function getValue()
   {
        var x=document.getElementById("cars").value;

        document.getElementById("cars2").innerHTML = x.toString();
    }

window.onload = function() {
  document.getElementById("cars3").addEventListener("click", getValue);
};  


</script>

</head>

<body>

<h1 id="myHeader" onclick="getValue()">"CLICk HERE !" </h1>

<div id="cars3">afaf</div>

 <select id="cars" name ="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option></select> 
  </select>


<p id="cars2">afaf2</p>

</body>

</html>

为什么这个事件监听器不起作用？

2 个答案: