我正在尝试使用单个按钮在图像可见和不可见之间切换。我希望第一次单击使图像出现，第二次单击再次隐藏它。我认为使用 bool 值是执行此操作的最佳方法，但我无法完全让它工作。
function myStats(){
counter = true;
if(counter == true){
document.getElementById('stat').style.display = 'block';
}
if(counter == false){
document.getElementById('stat').style.display = 'none';
}
}<!DOCTYPE html>
<html>
<head>
<style>
body{background-color: #A9A9A9;}
</style>
</head>
<body>
<p> Dallas Fuel </p>
<center><img id="stat" src="Images/buttonLA.png" style="display:none;"/></center>
<button onclick="myStats()">Player 1</button>
<h3 id="var"></h3>
</body>
</html>我意识到这显然行不通，因为我没有切换 bool 值，但这就是我正在寻求帮助的原因。
最佳答案
创建一个名为hidden的css类，然后使用classList.toggle() 。单击按钮时，会切换图像上的类。
可以这样完成:
document.querySelector('button').addEventListener('click', myStats)
function myStats() {
document.getElementById('stat').classList.toggle('hidden')
}.hidden { display: none; }<center><button>Player 1</button></center>
<center><img id="stat" src="https://via.placeholder.com/150" class="hidden"></center>关于javascript - 如何使用 bool 值来切换图像可见性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55108145/