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

sta*_*ape 3 html javascript onclick button

但是,测试一个简单的切换显示,第一次切换显示需要两次点击.之后它会在一个中完成.

<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>
Run Code Online (Sandbox Code Playgroud)

这是我的javascript:

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

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

ic3*_*3rg 5

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

你也可以简化一下事情:

p.style.display = p.style.display == "none" ? "block" : "none";
Run Code Online (Sandbox Code Playgroud)