Question

嘿，伙计们刚接触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>

当我尝试使用此代码时，它可以正常工作，但是当我第三次单击按钮时图像不会消失。我需要的是让你的过程重复。我怎样才能做到这一点？希望你们能帮助我。

Answer 1

在您设置的HTML中，您点击按钮时设置了addelement功能，因此.onclick=内部不需要addelement内容，您只需在hide之间验证当前显示值。 {1}}和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"; }

Answer 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/

按钮功能不重复

2 个答案: