我试图让图像在点击时出现，但脚本没有执行

Question

当您单击页面上的活动图像时，我正在尝试显示一个单独的图像。

我尝试过将onclick移动到<a>标记、<img>标记、<div>标记中，我尝试过使用这个脚本命令的不同版本，似乎没有什么能使它工作。活动图像和cursor:pointer都可以工作，但java正在失败。有什么想法吗？？

function opencontact() {
var x = document.getElementById("instagram");
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}

.insta {
display: none;
position: fixed;
top: 180px;
right: 220px;
z-index: 2;
transition: 0s;
padding: 0px;
}

<div id="lips2" class="lipbtn2">
<span style="cursor:pointer" onclick="opencontact()">
<a>
<img src="https://www.country935.ca/wp-content/uploads/sites/19/2017/07/a-kiss.jpg" width="15%" height="auto" alt="" class="kiss2">
<img src="https://dzasv7x7a867v.cloudfront.net/product_photos/34277616/20150910_011229_1000w.png" width="15%" height="auto" alt="" class="kiss2active">
</a>
</span>
</div>
<div id="instagram" class="insta">
<a href="http://instagram.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png" alt="" width="124px" />
</a>
</div>

Answer 1

你需要扭转测试，否则你将不得不点击两次

我不确定你还想发生什么

function opencontact() {
var x = document.getElementById("instagram");
x.style.display = x.style.display === "inline"? "none" : "inline"
}

.insta {
display: none;
position: fixed;
top: 180px;
right: 220px;
z-index: 2;
transition: 0s;
padding: 0px;
}

<div id="lips2" class="lipbtn2">
<span style="cursor:pointer" onclick="opencontact()">
<a>
<img src="https://www.country935.ca/wp-content/uploads/sites/19/2017/07/a-kiss.jpg" width="15%" height="auto" alt="" class="kiss2">
<img src="https://dzasv7x7a867v.cloudfront.net/product_photos/34277616/20150910_011229_1000w.png" width="15%" height="auto" alt="" class="kiss2active">
</a>
</span>
</div>
<div id="instagram" class="insta">
<a href="http://instagram.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png" alt="" width="124px" />
</a>
</div>