logo标签列表

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

javascripthtmlbuttononclick
4

在测试一个简单的切换显示功能时，第一次需要点击两次才能完成切换。之后就只需要点击一次即可。

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

1
看看我做的这个 fiddle。我测试了你的代码，只是在html文件的<head></head>标签中添加了JavaScript，并且它对我非常有效。ic3b3rg的答案很好地简化了你的代码，但从jsfiddle的外观来看，似乎你的代码已经按照预期工作。我在Chrome中进行了测试。你可能要检查一下你引用的<script src="mainScript.js"></script> 是否指向正确的位置。 - War10ck
尝试过了，但没有起作用。而且我的mainScript.js确实放在正确的位置。在几个浏览器中进行了测试，都出现了同样的问题。 - starscape
我注意到我之前的评论中有一个问题。请查看下面的答案以获取更多详细信息。 - War10ck
5个回答
5
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 - War10ck
1

我对我上面评论中发布的代码片段进行了更新。在进一步测试双击后，我的先前的代码片段仍然遇到了同样的问题。

经过逐步调试，初始显示值返回为""而不是block。我不确定为什么它没有采用您在<head></head>部分设置的值，但如果您像这样内联它：

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

它可以通过一次按钮点击就完成正确的操作。

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

我将更深入地研究为什么你的样式在<head></head>部分中出现问题，但现在这里有一个快速（并且有些粗糙）的解决方法。

希望这能帮到你，祝你好运！

这解决了问题，非常感谢！我所做的只是将“block”更改为“inline”。每个人都非常乐于助人，这是我第一次使用Stack Overflow的美妙体验。 - starscape
1

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

OP正在设置初始显示值。即，他正在使用#p1{display:block;}覆盖内联。 - War10ck
如果您查看CSS，我已将p1元素的显示属性设置为块。编辑：没有看到war10cks的评论。 - starscape
在Firefox浏览器中，第一次读取p.style.display实际上会返回一个空字符串。 - Ben
那么问题不就在于显示属性最初是块状的，使得图像可见吗？按钮正常工作，可以切换图像的可见性。 - Will C.
0

你的答案

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

我改变了条件，但仍然遇到同样的问题。后来我意识到这是由于代码执行顺序导致的。我的 CSS 样式已经将元素设置为“block”，而我却在检查元素的显示状态是否为“none”，然后再进行“display block”的操作。因此，第一次点击时，它会将显示状态更改为“none”，然后第二次点击时，它会将显示状态更改为“block”。希望我的解释清楚明白。 祝愉快！

关于编程风格的内容，请按照您自己的风格进行翻译。 - Saeed Noruzi
1
你能否编辑你的回答，解释一下你做了什么改变，与其他答案有何不同，以及为什么这样可以解决问题？ - Elikill58
我改变了条件，但仍然遇到同样的问题。后来我意识到这是由于代码执行顺序导致的。我的CSS样式已经设置为“block”，而我却在检查元素的显示状态是否为“none”，如果是，则将其设置为“block”。因此，第一次单击时，它会将显示设置为“none”，然后第二次单击时，它会将显示设置为“block”。希望我的解释清楚了。 - Saeed Noruzi
-2

同样的问题可以通过将 "block" : "none"; 替换为 ?"none" : "block"; 来解决，这样你就不需要在第一次单击切换按钮之前双击了，单击即可。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接