英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论