javascript - 如何使用 bool 值来切换图像可见性？-6ren

javascript - 如何使用 bool 值来切换图像可见性？

转载作者：行者123 更新时间：2023-12-01 01:11:42

25

4

我正在尝试使用单个按钮在图像可见和不可见之间切换。我希望第一次单击使图像出现，第二次单击再次隐藏它。我认为使用 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/

25

4

0

文章推荐： f# - NSubstitute 和 FSharp - 模拟 FSharp 函数

文章推荐： Javascript 滚动文本函数 - array.shift() 不是函数

c# - 如何将 bool 转换为可为 null 的 bool(bool？)
我有一个带有列的表提供者 implied(tiny int)(something like nullable bool) provi
c# - 为什么编译器将 bool 转换为整数并返回 bool 而不是返回 bool 本身？
我正在阅读 VideoFileWriter来自 AForge.Video.FFMPEG 的类(class)通过 ILSPY 组装(我很想看看特定方法是如何工作的)并发现了这个: public bool
flutter - 无法将类型 'bool?' 的值分配给类型 'bool' 的变量，因为 'bool?' 可以为 null，而 'bool' 则不能
这是我的完整代码... import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import
haskell - 从 [Maybe Bool] 中获得一个 Bool，该 Bool 保证至少包含一个 Just
我有一个输入 list类型 [Maybe SomeType]和一个谓词 p类型 SomeType -> Bool ，我想回答这个问题“谓词 p 是否适用于所有碰巧在输入中的 SomeType ？”。
转换为 bool : `!!` vs `(bool)`
使用 !!x 有什么区别吗？对比(bool)x ？假设__STDC_VERSION__ >= 199901L和 #include 他们都保证结果是0吗？或 1 ，并且无论 x 的大小和值如何，都不
c++ - (bool | bool) 安全吗？
我正在编写一些 C++ 代码，我想调用两个函数(checkXDirty 和 checkYDirty)，并返回 true如果任一返回 true。即使一个返回 true 我也需要评估两者，所以我的第一个想
c++ - "#define bool bool"当我悬停 bool 时说 QtCreator - 我将其跟踪到 boost::asio
我注意到 bool在 QtCreator 中以不同于其他类型的颜色突出显示: 只有在包含某些 header 时才会发生这种情况，最终我将其追踪到 . QtCreator 的代码检查器似乎无法手动跟踪
ios - 类型 "Int -> Bool","Int-> Bool -> Int","Int-> String -> Int－> Bool"
有一个函数: func (first: Int) -> Int -> Bool -> String { return ? } 返回值怎么写？我对上面 func 的返回类型感到很困惑。最
python - 为什么 tf.cond() 将 tf.bool 识别为 python bool 而不是 tf.bool？
训练神经网络学习“异或” 我正在尝试使用“批量归一化”，我创建了一个批量归一化层函数“batch_norm1”。 import tensorflow as tf import nump
c# - 如何从 C# 中的异步任务函数获取 bool 结果 - 错误 : Cannot implicitly convert type `void' to `bool'
我已经创建了任务函数来验证我的 json 文件。一切正常，直到我没有使用结果。当我试图从 async task function 获得结果时它显示错误为 Cannot implicitly conve
Swift.Bool 不是 Bool 吗？
我有一个函数 func login (parameters: [(String, Any)], completion: @escaping (Bool) -> Vo
正则表达式用 bool 替换 bool 值
我正在处理最近从 X/Motif 转移到 Qt 的 C++ 代码库。我正在尝试编写一个 Perl 脚本，它将用 bool 替换所有出现的 Boolean(来自 X)。该脚本只是做了一个简单的替换。 s
flutter - 无法将参数类型Future 分配给参数类型 'bool'
嗨，我正尝试创建一个Visiblity小部件，如果用户在Firebase数据库阵列上，该小部件将显示。看起来像这样(成员数组): 如您所见，我创建了一个StreamBuilder，如果当前用户的用户名
if-statement - Flutter中的Future vs bool
我创建了如下的rest api方法， Future activateAccount(int id, int code) async{ final body = {"code": '$c
flutter - 如何将Future 转换为Stream
在我的Flutter应用中，我有一个返回Future的函数，但我想将结果作为Stream。这是函数: Future isGpsOn() async { if (await Geolocat
SQLAlchemy bool 值与 bool 值
我可以看到 BOOLEAN 覆盖了 __visit_name__ class BOOLEAN(Boolean): __visit_name__ = 'BOOLEAN' 控制调度员选择的访问者方
c# - 分配 bool 值？ bool
考虑以下代码: bool x; bool? y = null; x = y?? true; 将 bool? 分配给 bool 是一个编译时错误，但上面的代码在编译和运行时都成功了。为什么？尽管第三条语
javascript( bool 值 ^ bool 值)
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索，我已经设法翻译了几乎所有的 Javascript 代码!但是，有些代码我无法准确理解它在做什么。这是一
boolean - 预期类型 `bool` ，发现类型 `&bool`
我想拍一张bool来自Vec并在 if 语句中进行比较。如何解决以下错误？ | 7 | if cell { | ^^^^ expected
ios - bool _WebTryThreadLock(bool) 崩溃
我在我的应用程序崩溃跟踪工具中发现了一些崩溃。基本上我有一个 tabBarController，其中一个选项卡有一个嵌入式 UIWebView，另一个选项卡有一个带有 UITableView 的 Co

首页

博学

6Ren·AI

商城

javascript - 如何使用 bool 值来切换图像可见性？