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

标签 javascript

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>

最佳答案

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

请注意:您没有任何带有 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>

关于javascript - 我想在点击时隐藏图像。 element.onclick 不起作用时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57053090/

相关文章:

javascript - 在 iframe 中嵌入谷歌地图时,如何删除附近的地点?

javascript - 如何在 html 中使用 javascript 获取 iframe 作为字符串并将其显示在 div 标记中?

javascript - VivaGraphJS 删除链接

javascript - 如何通过 JS 嵌入代码嵌入 HTML

javascript - 将 html 文件放入 iframe 或 div 中并单击它

javascript - 正则表达式匹配末尾有 n 个重复数字的数字

javascript - nicEdit 未检测到 'space' 字符

javascript - 为什么 watcher 在响应 vue.js 中的数据变化时比计算更好地执行异步或昂贵的操作?

javascript - 在 Visual Studio 中运行 JavaScript 单元测试

javascript - Cordova NFC 在 12 月获取 NFC 标签值