クリック時のボタンの色を変更する

ユーザがクリックできるボタンは2つあります。目的は、ユーザーがボタンをクリックして達成した色を変更できるようにすることです。しかし、問題は、他のボタンをクリックすると元の色に戻り、その逆に色を元の色に戻すことです。ここに私のコードがあります。クリック時のボタンの色を変更する

<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"; 


     });

出典

2017-04-11 rayjay

set background-color： ''をクリックすると他のボタンが表示されます。 –

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>

出典

2017-04-11 04:34:18 Mamun

OPがすでに背景色をボタンに設定している場合はどうなりますか？ '＃button1 {背景：緑; } ' – Tushar

@Tusharすでにその要素の「デフォルトの背景色」として定義されていて、その色に設定されます。 JavaScriptとCSSの基本知識があれば論理的です。 –

@TyQ。真実。私の悪い。 – Tushar

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>

出典

2017-04-11 04:36:29

これは私が自分のCSSで持っているものです。＃button1 { パディング：15px 25px; font-size：24px; text-align：center; カーソル：ポインタ; 概要：なし。色：#fff; 背景色：＃4CAF50; border：none; border-radius：15px; ボックスシャドウ：0 9px＃999; }＃1のButton1：ホバー{背景色：＃3e8e41} ＃1のButton1：アクティブ{ ボックスシャドウ：0 5pxの＃666。トランスフォーム：translateY（4px）; } – rayjay

@rayjay cssはjavascriptで変更しても効果がありません。ホバー効果は同じになります。あなたのCSSを投稿して、あなたが実装したいものをあなたの質問に記入してください –

あなたが探しているものを、このですか？

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>

先をお探しですか？

出典

2017-04-11 04:37:27

クリック時のボタンの色を変更する

答えて

関連する問題