按钮功能不重复答案

【问题标题】：Button function not repeating按钮功能不重复
【发布时间】：2014-08-10 15:34:55
【问题描述】：

嘿，伙计们是 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>

当我尝试此代码时，它可以工作，但是当我第三次单击按钮时，图像并没有消失。我需要的是让你的过程重复。我怎样才能做到这一点？希望大家帮帮我。

【问题讨论】：

你的代码只工作一次的原因是，第一次点击时，你的 onclick 方法不存在，所以图像被隐藏了。在接下来的每次点击中，此方法都会执行设置显示为内联。

标签： javascript loops events

【解决方案1】：

在您的 HTML 中，您正在设置单击按钮时调用 addelement 函数，因此在 .onclick= 中不需要 addelement 的东西，您也只需验证当前显示值即可在 hide 和 inline 之间切换

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

编辑：

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

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";
}

【讨论】：

请注意，如果图像最初被 CSS 隐藏，它将无法按预期工作：jsfiddle.net/userdude/zoohcveh/8

【解决方案2】：

我已经为你创建了 jsfiddle...

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

代码：-

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

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

新示例：-http://jsfiddle.net/zoohcveh/10/

【讨论】：

为什么每次点击时都重新添加相同的 onclick 处理程序？