按钮功能不重复

Button function not repeating

本文关键字：功能 按钮      更新时间：2023-09-26

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

当我尝试这个代码，它的工作原理，但当我点击按钮的第三次图像不消失。我需要做的就是重复这个过程。我该怎么做呢?

在你的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";
}

我已经为您创建了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/

相关文章：