所以我想做一個按鈕，點擊后改變其樣式，再次點擊后又將其樣式改為原來的。我非常疲憊，我的大腦作業在10%，我為自己不能弄清楚而感到深深的羞愧，因為我已經做了幾次了。對于這個愚蠢的問題，我很抱歉，我一直在通過谷歌閱讀，看看如何做，我以前自己做，沒有搜索到做的方法，我知道這沒什么復雜的，但我就是不知道為什么我的代碼不作業.............
。<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
</head>/span>
<body>
<div class="center">
< button class="button-for-the-books" id="testerbuton"> 購買</按鈕>
</div>/span>
<style>
.button-for-the-books{
border: 3px solid #191919;
background-color: white;
高度：42px。
}
</style>>
<script>
var valueto = "off"/span>;
let testerbutona = document.getElementById("testerbuton") 。
testerbutona.addEventListener('click',function(>/span>) {
if(valueto === "off"/span>){
testerbutona.style.backgroundColor ="black";
testerbutona.style.border ="3px solid white";
testerbutona.style.color ="white"。
valueto = "on"。
}
if(valueto === "on"){
testerbutona.style.bacgroundColor ="white"/span>;
testerbutona.style.border ="3px solid black"/span>;
testerbutona.style.color ="black"。
valueto = "off"。
}
})
</script>>
</body>
</html>/span>uj5u.com熱心網友回復：
這里有兩個錯誤。
這里有兩個錯誤。
background錯寫成了bacground。
else if陳述句，否則它將總是檢測到第二個if陳述句是正確的，因為第一個if陳述句將其設定為 "on"。
。
<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
</head>/span>
<body>
<div class="center">
< button class="button-for-the-books" id="testerbuton"> 購買</按鈕>
</div>/span>
<style>
.button-for-the-books{
border: 3px solid #191919;
background-color: white;
高度：42px。
}
</style>>
<script>
var valueto = "off"/span>;
let testerbutona = document.getElementById("testerbuton") 。
testerbutona.addEventListener('click',function(>/span>) {
if(valueto === "off"/span>){
testerbutona.style.backgroundColor ="black";
testerbutona.style.border ="3px solid white";
testerbutona.style.color ="white"。
valueto = "on"。
}
else if(valueto === "on") {
testerbutona.style.backgroundColor ="white"/span>;
testerbutona.style.border ="3px solid black";
testerbutona.style.color ="black"。
valueto = "off"。
}
})
</script>>
</body>
</html>/span>uj5u.com熱心網友回復：
這種方式
<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
<style>
.center > button {
display : block;
margin : 1em auto;
}
button.button-for-thebooks {
border : 3px solid lightgrey;
color : 黑色。
background-color : white;
height : 42px;
}
button.button-for-thebooks.reverse{
color : white;
background-color : black;
</style>
</head>
<body>
<div class="center">
< button class="button-for-the-books" id="testerbuton"> 購買</按鈕>
</div>/span>
<script>
const testerbutona = document.getElementById("testerbuton"/span>)
testerbutona.addEventListener('click', function() {
testerbutona.classList.toggle（'reverse')
})
</script>>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/320423.html
標籤：
上一篇：有辦法再重復一次嗎？