HTML/Javascript-按钮需要两次单击才能执行单击事件_Javascript_Html_Button_Onclick

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

javascript html button

HTML/Javascript-按钮需要两次单击才能执行单击事件,javascript,html,button,onclick,Javascript,Html,Button,Onclick,但是，在测试一个简单的切换显示时，第一次切换显示需要两次单击。之后它一次就完成了 <html> <head> <style> #carousel{border:2px solid blue; width:1280px; height:720px;} #p2{visibility:hidden;} #p1{display:block;} #btn{position:absolute; top:2000px;} </style> <

但是，在测试一个简单的切换显示时，第一次切换显示需要两次单击。之后它一次就完成了

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

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

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

您还可以简化一些事情：

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

我有一个更新，我以前的小提琴张贴在我的评论上面。我以前的小提琴在进一步测试双击后仍然遇到同样的问题

单步执行后，初始显示值返回为

“”

而不是

块

。我不知道为什么它不接受您在

部分中设置的值，但如果您这样内联它：

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

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

这是我的最新更新，演示了这一点

我将在

部分进一步探讨为什么要进行样式设置，但现在，这里有一个快速（半粗糙）的解决方案

希望这有帮助，祝你好运

只需替换

“block”：“none”按？“无”：“块”
您无需第一次双击切换按钮，只需单击即可。
OP正在设置初始显示值。也就是说，他正在用#p1{display:block；}
内联覆盖，如果您查看CSS，我已经将p1元素的display属性设置为block。编辑：没有看到war10cks commentp.style.display
在Firefox中第一次读取时实际上会返回一个空字符串。那么display属性最初被阻塞，使图像可见，这不是问题吗？该按钮工作正常，可将图像切换为可见/不可见。我一定喜欢三元运算符+1检查我放在一起的这个。我测试了您的代码，并在html的
标记中添加了一个脚本标记，它对我来说非常有效。ic3b3rg的答案是对代码进行了很好的简化，但从JSFIDLE的外观来看，您的代码似乎工作正常。我用铬做了测试。您可以检查您的引用是否指向正确的位置。尝试了该操作，但无效。我的mainScript.js确实在正确的位置。在几个浏览器中测试过，都做了同样的事情。我在之前的评论中注意到了一个问题。请参阅下面我的答案以了解更多详细信息。这将修复它，非常感谢！我所做的只是将“block”改为“inline”。每个人都很有帮助，这是使用堆栈溢出的第一次美妙体验。
p.style.display = p.style.display == "none" ? "block" : "none";

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