我想在单击时隐藏图像。当element.onclick不起作用时调用函数

Question

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

function hide(el){
  el.hidden = true;
}

image.onclick = hide(image);

我已经无数次地研究了这部分，但是我还不够聪明，无法理解为什么它不起作用。 谢谢你们的帮助。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image></div>
  <script src="script.js"></script>
  </body>
</html>

Answer 1

您的函数在页面加载时被调用并执行。 在匿名函数内部调用该函数。

请注意：您没有任何id=image元素。

 var image = document.getElementById("image"); function hide(el){ el.hidden = true; } image.onclick = function(){ hide(image) };

 <div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image"></div>

以下演示可能会帮助您清除疑问：

 var image = document.getElementById("image"); function hide(){ image.hidden = true; } image.onclick = hide; // notice there is no () after the function name, here the function will not be executed on page load

 <div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image"></div>

Answer 2

document.getElementById("image").addEventListener('click', function() {
  this.hidden = true;
}

Answer 3

当我查看您的HTML时，没有ID为“ image”的图像，因此document.getElementById("image")调用不会返回任何元素。

您可能要使用getElementsByTagName("image")代替，但请注意，这是一个元素数组。

我想在单击时隐藏图像。当element.onclick不起作用时调用函数

问题描述

3 个解决方案

解决方案1
3 2019-07-16 08:33:51

解决方案2
0 2019-07-16 08:36:20

解决方案3
0 2019-07-16 08:40:40

我想在单击时隐藏图像。 当element.onclick不起作用时调用函数

问题描述

3 个解决方案

解决方案1 3 2019-07-16 08:33:51

解决方案2 0 2019-07-16 08:36:20

解决方案3 0 2019-07-16 08:40:40

我想在单击时隐藏图像。当element.onclick不起作用时调用函数

解决方案1
3 2019-07-16 08:33:51

解决方案2
0 2019-07-16 08:36:20

解决方案3
0 2019-07-16 08:40:40