尝试将按钮从关闭切换到打开然后再返回可能是啥问题......？
Posted
技术标签:
【中文标题】尝试将按钮从关闭切换到打开然后再返回可能是啥问题......？【英文标题】：Trying to switch a button from off to on and back again what might be the problem...?尝试将按钮从关闭切换到打开然后再返回可能是什么问题......？ 【发布时间】：2021-11-09 02:52:24 【问题描述】：所以我试图制作一个按钮，单击它会更改其样式，再次单击它会将其样式更改为原始样式。我非常筋疲力尽，我的大脑在 10% 上工作，我为自己无法弄清楚，因为我已经做过几次了，我深感羞愧。抱歉这个愚蠢的问题，我一直在通过谷歌阅读以了解如何去做没用......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="center">
<button class="buttons-for-the-books" id="testerbuton">Buy</button>
</div>
<style>
.buttons-for-the-books
border: 3px solid #191919;
background-color: white;
height:42px;
</style>
<script>
var valueto = "off";
let testerbutona = document.getElementById("testerbuton");
testerbutona.addEventListener('click',function()
if(valueto === "off")
testerbutona.style.backgroundColor ="black";
testerbutona.style.border ="3px solid white";
testerbutona.style.color ="white";
valueto = "on";
if(valueto === "on")
testerbutona.style.bacgroundColor ="white";
testerbutona.style.border ="3px solid black";
testerbutona.style.color ="black";
valueto = "off";
)
</script>
</body>
</html>【问题讨论】：
【参考方案1】：这边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center > button
display : block;
margin : 1em auto;
button.buttons-for-the-books
border : 3px solid lightgrey;
color : black;
background-color : white;
height : 42px;
button.buttons-for-the-books.reverse
color : white;
background-color : black;
</style>
</head>
<body>
<div class="center">
<button class="buttons-for-the-books" id="testerbuton">Buy</button>
</div>
<script>
const testerbutona = document.getElementById("testerbuton")
testerbutona.addEventListener('click', function()
testerbutona.classList.toggle('reverse')
)
</script>
</body>
</html>【讨论】：
【参考方案2】：这里有两个错误。
-
您在第二个 if 语句中将
background 拼写为 bacground。
您需要使用else if 语句，否则它将始终检测到第二个 if 语句是正确的，因为第一个将其设置为“on”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="center">
<button class="buttons-for-the-books" id="testerbuton">Buy</button>
</div>
<style>
.buttons-for-the-books
border: 3px solid #191919;
background-color: white;
height:42px;
</style>
<script>
var valueto = "off";
let testerbutona = document.getElementById("testerbuton");
testerbutona.addEventListener('click',function()
if(valueto === "off")
testerbutona.style.backgroundColor ="black";
testerbutona.style.border ="3px solid white";
testerbutona.style.color ="white";
valueto = "on";
else if(valueto === "on")
testerbutona.style.backgroundColor ="white";
testerbutona.style.border ="3px solid black";
testerbutona.style.color ="black";
valueto = "off";
)
</script>
</body>
</html>【讨论】：
非常感谢你让我终于可以睡觉了！你救了我的命！以上是关于尝试将按钮从关闭切换到打开然后再返回可能是啥问题......？的主要内容，如果未能解决你的问题，请参考以下文章