更改按鈕顏色 onClick
[英]Change Button color onClick
問題描述
我希望我的Button每次點擊它時都會改變顏色。 但它只會在第一次點擊時改變顏色。
我相信問題出在setColor函數中。 每次單擊Button ， count都會設置為 1。因此，即使我將其設置為 0，下次單擊時它也會重置為 1。 我該如何解決？ javascript/html 中是否有全局變量可以輕松解決？
<!DOCTYPE html>
<html>
<head>
<script>
function setColor(btn, color){
var count=1;
var property = document.getElementById(btn);
if (count == 0){
property.style.backgroundColor = "#FFFFFF"
count=1;
}
else{
property.style.backgroundColor = "#7FFF00"
count=0;
}
}
</script>
</head>
<body>
<input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/>
</body>
</html>
4 個解決方案
解決方案1
13 已采納 2014-11-14 19:35:01
javascript 中確實有全局變量。 您可以了解有關scopes 的更多信息，這在這種情況下很有幫助。
您的代碼可能如下所示：
<script>
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
property.style.backgroundColor = "#7FFF00"
count = 0;
}
}
</script>
希望這可以幫助。
解決方案2
8 2014-11-14 19:36:13
1.
function setColor(e) {
var target = e.target,
count = +target.dataset.count;
target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
target.dataset.count = count === 1 ? 0 : 1;
/*
() : ? - this is conditional (ternary) operator - equals
if (count === 1) {
target.style.backgroundColor = "#7FFF00";
target.dataset.count = 0;
} else {
target.style.backgroundColor = "#FFFFFF";
target.dataset.count = 1;
}
target.dataset - return all "data attributes" for current element,
in the form of object,
and you don't need use global variable in order to save the state 0 or 1
*/
}
<input
type="button"
id="button"
value="button"
style="color:white"
onclick="setColor(event)";
data-count="1"
/>
2.
function setColor(e) {
var target = e.target,
status = e.target.classList.contains('active');
e.target.classList.add(status ? 'inactive' : 'active');
e.target.classList.remove(status ? 'active' : 'inactive');
}
.active {
background-color: #7FFF00;
}
.inactive {
background-color: #FFFFFF;
}
<input
type="button"
id="button"
value="button"
style="color:white"
onclick="setColor(event)"
/>
解決方案3
0 2014-11-14 19:30:28
每次setColor被擊中時，您都將設置 count = 1。您需要在函數范圍之外定義count 。 例子：
var count=1;
function setColor(btn, color){
var property = document.getElementById(btn);
if (count == 0){
property.style.backgroundColor = "#FFFFFF"
count=1;
}
else{
property.style.backgroundColor = "#7FFF00"
count=0;
}
}
解決方案4
0 2020-07-09 14:50:35
使用 jquery，試試這個。 如果您的按鈕 ID 是 id= clickme
$("clickme").on('çlick', function(){
$(this).css('背景色', '灰色'); ......
更改按鈕中的顏色onclick事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.