Fatal编程技术网

Javascript 按钮功能不重复

javascript loops events

Javascript 按钮功能不重复,javascript,loops,events,Javascript,Loops,Events,嘿，伙计们，我是javascript开发新手，我试着对事件做一些非常简单的事情。我制作了一个按钮，当点击按钮时，图像隐藏，当再次点击按钮时，图像出现。但是当我再次执行相同的过程时，它不起作用。当我刷新页面时，它起作用。代码是 <html> <body> <form> <img src='gun.jpg' id="babe"></img> <input type="button" id="a" value="babe" onclic

嘿，伙计们，我是javascript开发新手，我试着对事件做一些非常简单的事情。我制作了一个按钮，当点击按钮时，图像隐藏，当再次点击按钮时，图像出现。但是当我再次执行相同的过程时，它不起作用。当我刷新页面时，它起作用。代码是

<html>
<body>
<form>
<img src='gun.jpg' id="babe"></img>
<input type="button" id="a" value="babe" onclick="addelement(this);" >
</form>
<script>

  function addelement(event) {

    document.getElementById('a').onclick = function (s) {

    document.getElementById('babe').style.display = "inline";

  }

  document.getElementById('babe').style.display = "none";

}
</script>

</body>

</html>


函数附加元素（事件）{
document.getElementById（'a'）。onclick=函数{
document.getElementById（'babe'）.style.display=“inline”；
}
document.getElementById（'babe'）.style.display=“无”；
}
当我尝试这段代码时，它可以工作，但当我第三次单击按钮时，图像并没有消失。我需要的是让你重复这个过程。我该怎么做？希望你们能帮助我。

我已经为你们创建了JSFIDLE

我已更新了您的代码并删除了不需要的事件和代码：-

代码：-

  <script>
    var img = document.getElementById('babe');
    img.style.display = "none";

    function addelement(event) {
        img.style.display = img.style.display == "none" ? "inline" : "none";
    }
  </script>


var img=document.getElementById（'babe'）；
img.style.display=“无”；
函数附加元素（事件）{
img.style.display=img.style.display==“无”？“内联”：“无”；
}
新示例：-

在HTML中，当单击按钮时，您正在设置调用
addelement
函数，因此
。onclick=
在
addelement
中不需要填充内容，而且您只需验证当前显示值，以便在
隐藏
和
内联
之间切换即可


function addelement(event) {
  var img = document.getElementById('babe');
  var isHidden = img.style.display == "none";
  img.style.display = isHidden ? "inline" : "none";
}


编辑：

试图计算初始显示样式的代码（如果浏览器支持）


为什么每次单击时都要添加相同的onclick处理程序？代码只工作一次的原因是，对于第一次单击，您的
onclick
方法不存在，因此图像被隐藏。每次单击后，都会执行此方法，将display设置为inline。请注意，如果图像最初由CSS隐藏，则此方法不会按预期工作：

function addelement(event) {
  var img = document.getElementById('babe');
  var style = img.style;
  if (window.getComputedStyle) {
    style = window.getComputedStyle(img);
  }
  var isHidden = style.display == "none";
  img.style.display = isHidden ? "inline" : "none";
}