英文:
Change Button's color twice when it's clicked
问题
我正在尝试创建一个按钮，当它被点击时，会更改背景颜色（变为绿色）。但当再次点击它时，按钮会返回到原始的背景颜色（橙色）。
var btn1 = document.getElementById("btn-1");
if (btn1.style.backgroundColor === "orange") {
btn1.addEventListener("click", function () {
btn1.style.backgroundColor = "green";
});
} else {
btn1.addEventListener("click", function () {
btn1.style.backgroundColor = "orange";
});
}
能帮到你吗？谢谢！
英文:
I'm trying to create a button whose change background color (to green) when it is cliked. But when it is cliked againg the button returns to the original background color (from orange).
var btn1 = document.getElementById("btn-1")
if (btn1.style.backgroundColor = "orange") {
btn1.addEventListener("click", function () {
btn1.style.backgroundColor = "green"
})
} else {btn1.addEventListener("click", function () {
btn1.style.backgroundColor = "orange"
})
}
Could you help me? Thx!
I'm trying to create a button whose change background color (to green) when it is cliked. But when it is cliked againg the button returns to the original background color (from orange).
答案1
得分: 2
有许多方法可以做到这一点。我首选的方法是简单地切换元素上的一个类。
在 CSS 中通过 #btn-1 设置默认颜色，然后通过 #btn-1.active 设置活动颜色。然后通过切换活动类，当元素具有活动类时，将颜色更改为绿色，没有活动类时为橙色。
英文:
There are many ways to do this. My preferred way is simply toggle a class on the element.
In CSS set the default color via #btn-1 then have an active color set via #btn-1.active. Then by toggling the class of active, you change the color to green when the element has the class of active, and orange when it doesn't.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var toggleBTN = document.getElementById("btn-1")
toggleBTN.addEventListener("click",() => {
toggleBTN.classList.toggle("active");
});
<!-- language: lang-css -->
#btn-1{
background:orange;
}
#btn-1.active{
background:green;
}
<!-- language: lang-html -->
<button id="btn-1">Toggle Color</button>
<!-- end snippet -->
答案2
得分: 1
只需在单击事件上切换颜色：
<button id="btn-1" style="background-color: orange">点击我</button>
document
.getElementById("btn-1")
.addEventListener(
'click',
({target:{style}}) => style.backgroundColor = style.backgroundColor === 'orange' ? 'green' : 'orange'
);
英文:
Just toggle the color on the click event:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document
.getElementById("btn-1")
.addEventListener(
'click',
({target:{style}}) => style.backgroundColor = style.backgroundColor === 'orange' ? 'green' : 'orange'
);
<!-- language: lang-html -->
<button id="btn-1" style="background-color: orange">Click me</button>
<!-- end snippet -->
答案3
得分: 0
以下是翻译好的部分：
let button = document.getElementById("button");
button.style.backgroundColor = "orange";
button.addEventListener("click", function () {
if (button.style.backgroundColor == "orange") {
button.style.backgroundColor = "green";
} else button.style.backgroundColor = "orange";
})
<button id="button">test</button>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let button = document.getElementById("button");
button.style.backgroundColor = "orange";
button.addEventListener("click", function () {
if(button.style.backgroundColor == "orange"){
button.style.backgroundColor = "green";
} else button.style.backgroundColor = "orange";
})
<!-- language: lang-html -->
<button id="button">test</button>
<!-- end snippet -->
how i understand you: you can set starter color of button to orange;<br><br>
and then add EventListener to button with this logic:<br>
-if the color of the button is orange - change to green<br>
or if the color is not orange - change to orange<br>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论