Javascript 更改按钮颜色 onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26937424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Button color onClick
提问by user2456977
I want my Buttonto change color every time I click on it. But it only changes color on the first click.
我希望Button每次点击它时都会改变颜色。但它只会在第一次点击时改变颜色。
I believe the problem is in the setColorfunction. Every time I click on the Button, countgets set to 1. So even when I set it to 0, it gets reset to 1 on the next click. How do I fix this? Are there global variables in javascript/html where this would easily be solved?
我相信问题出在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>
采纳答案by Julien P
There are indeed global variables in javascript. You can learn more about scopes, which are helpful in this situation.
javascript 中确实有全局变量。您可以了解有关scopes 的更多信息，这在这种情况下很有帮助。
Your code could look like this:
您的代码可能如下所示：
<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>
Hope this helps.
希望这可以帮助。
回答by Alexander T.
1.
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.
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)"
/>
回答by KJ Price
Every time setColorgets hit, you are setting count = 1. You would need to define countoutside of the scope of the function. Example:
每次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;
}
}
