更改點擊按鈕的顏色
[英]Change colour of buttons on click
問題描述
我有兩個按鈕，用戶可以單擊。 目的是使用戶能夠單擊按鈕並使它更改我已經完成的顏色。 但是問題是，當他們單擊其他按鈕時，我希望顏色恢復到原始顏色，反之亦然。 這是我的代碼。
<div id='rightAlign'>
<div id="but1">
<button id="button1">Click Me</button>
<button id="button2">Click Me</button>
</div>
</div>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click", function() {
button1.style.backgroundColor = "red";
button2.addEventListener("click", function() {
button2.style.backgroundColor = "red";
});
3 個解決方案
解決方案1
0 2017-04-11 04:34:18
您需要重置另一個button 。 請嘗試以下操作：
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button1Default, button2Default; button1Default = button1.style.backgroundColor; button2Default = button2.style.backgroundColor; button1.addEventListener("click", function(){ button1.style.backgroundColor = "red"; button2.style.backgroundColor = button2Default; }); button2.addEventListener("click", function(){ button2.style.backgroundColor = "red"; button1.style.backgroundColor = button1Default; });
#button1,#button2 { padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } #button1:hover {background-color: #3e8e41} #button1:active { box-shadow: 0 5px #666; transform: translateY(4px); }
<div id='rightAlign'> <div id="but1"> <button id="button1" onclick="">Click Me</button> <button id="button2">Click Me</button> </div> </div>
解決方案2
0 2017-04-11 04:36:29
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); button1.addEventListener("click", function(){ button1.style.backgroundColor = "red" button2.style.backgroundColor = '' }) button2.addEventListener("click", function(){ button2.style.backgroundColor = "red" button1.style.backgroundColor = '' })
<div id='rightAlign'> <div id="but1"> <button id="button1">Click Me</button> <button id="button2">Click Me</button> </div> </div>
解決方案3
0 2017-04-11 04:37:27
這是你想要的？
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); button1.addEventListener("click", function(){ button1.style.backgroundColor = "red"; button2.style.backgroundColor = ""; }); button2.addEventListener("click", function(){ button2.style.backgroundColor = "red"; button1.style.backgroundColor = ""; });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <button id="button1">Click Me</button> <button id="button2">Click Me</button> </body> </html>
尋找？
使用帶有按鈕的 javascript 來更改文本的顏色（列表）
[英]using javascript with buttons to change the colour of text (list)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.