HTML/Javascript - 按钮需要两次点击才能执行点击事件答案

【问题标题】：HTML/Javascript - Button takes two clicks to execute click eventHTML/Javascript - 按钮需要两次点击才能执行点击事件
【发布时间】：2012-12-31 16:17:11
【问题描述】：

测试一个简单的切换显示，但是，第一次切换显示需要两次单击。之后它会合而为一。

<html>
<head>
<style>
#carousel{border:2px solid blue;
width:1280px;
height:720px;}

#p2{visibility:hidden;}

#p1{display:block;}

#btn{position:absolute;
    top:2000px;}
</style>

<script src="mainScript.js"></script>
</head>

<body>

<div id="carousel">
    <img id="p1" src="pic1.jpg">
    <img id="p2" src="pic2.jpg">
</div>

<button type="button" id="button" onclick="clickEvent()">Click</button>

</body>
</html>

这是我的 javascript：

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "block")
    p.style.display = "none";
else
    p.style.display = "block";
}

应该注意我没有使用 jQuery，因为我发现的所有其他问题都与 jQuery 相关。

【问题讨论】：

看看我整理的这个fiddle。我测试了您的代码，并在您的 html 的 <head></head> 标记中的脚本标记中添加了 JavaScript，它对我来说非常有效。 ic3b3rg 的答案很好地简化了您的代码，但从 jsfiddle 的外观来看，您的代码似乎可以正常工作。我在 Chrome 中对其进行了测试。您可以检查您的参考 <script src="mainScript.js"></script> 是否指向正确的位置。
试过了，还是不行。而我的 mainScript.js 确实是在正确的位置。在几个浏览器中测试过，都做同样的事情
我在之前的评论中发现了一个问题。有关详细信息，请参阅下面的答案。

标签： javascript html button onclick

【解决方案1】：

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "none")
    p.style.display = "block";
else
    p.style.display = "none";
}

你也可以稍微简化一下：

p.style.display = p.style.display == "none" ? "block" : "none";

【讨论】：

爱三元运算符 +1

【解决方案2】：

我在上面的评论中发布了对我之前的小提琴的更新。在进一步测试双击后，我以前的小提琴仍然遇到同样的问题。

单步执行后，初始显示值返回为"" 而不是block。我不确定为什么它不采用您在 <head></head> 部分中设置的值，但如果您像这样内联它：

<img id="p1" src="pic1.jpg" style="display: none;" />

只需单击一次按钮，它第一次就可以正常工作。

这是我最新更新的fiddle 展示了这一点。

我将在<head></head> 部分详细了解您的样式，但现在，这里有一个快速（半粗略）的修复。

希望这会有所帮助，祝你好运！

【讨论】：

这解决了它，非常感谢！我所做的只是将“块”更改为“内联”。每个人都非常乐于助人，这是第一次使用 Stack Overflow 的美妙体验。

【解决方案3】：

默认显示属性是“内联”，因此您的逻辑没有考虑到这一点。它在第一次运行时将其更改为块，因此它仍然可见，然后在第二次单击时将其隐藏（将显示设置为无）

【讨论】：

OP 正在设置初始显示值。 IE。他正在用#p1{display:block;}覆盖内联
如果你看一下 CSS，我已经将 p1 元素的显示属性设置为阻止。编辑：没有看到 war10cks 评论
p.style.display 实际上会在 Firefox 中第一次读取时返回一个空字符串。
那么问题是不是显示属性最初是阻塞的，使图像可见？该按钮可以正常工作，将图像切换为可见/不可见。

【解决方案4】：

你的答案

    function clickEvent(){
    var p = document.getElementById("p1");
    if(p.style.display === "block")
        p.style.display = "none";
    else
        p.style.display = "block";
    }

我改变了条件我有同样的问题，我意识到这是关于执行我的 CSS 元素样式的订单代码已经是“块”，我正在检查元素显示是否为“无”然后执行显示块的东西，所以当我第一次点击时，它将显示更改为“无”，然后在第二次将显示更改为块，我希望我的解释清楚享受

【讨论】：

它关于您的风格的顺序
你能edit你的答案解释你改变了什么，与其他答案有什么不同以及为什么这应该解决这个问题？
我改变了条件我有同样的问题，我意识到这是关于订单代码执行我的 CSS 样式的元素已经是“块”，我正在检查元素显示是否是“ none”然后做显示块的事情，所以当我第一次点击时，它把显示改为“none”，然后在第二次它将显示改为块，我希望我的解释很清楚

【解决方案5】：

只需将"block" : "none"; 替换为?"none" : "block"; 即可解决相同的问题第一次不需要双击切换按钮，单击即可。

【讨论】：