javascriptでクリックするごとにhoverの色を変えたい

Question

実現したいこと

ボタンのhoverの色をクリックするごとに変えたいです。
具体的には初期は黒色のボタンでカーソルをあてると青色にhover、クリックすると黒色が緑色にhoverするようにしたいです。（また、そこから再度クリックすると初期の状態に戻るようにしたい）
どのようにコーディングすれば良いかアドバイスいただきたいです。

HTML

<a href="#" id="button_js" class="button">button</a>

CSS

.button{
  display: inline-block;
  text-decoration: none;
  background: #000000;
  font-size: 30px;
  color: #FFF;
  width: 150px;
  height: 150px;
  line-height: 150px;
  border-radius: 50%;
  text-align: center;
  transition: .4s;
}

.button:hover{
   background: #0000ff;
}

.button_js:hover{
   background: #008000;
}

javascript

document.getElementById('button_js').addEventListener('click',function(){
  document.getElementById('button_js').style.background='black';
});

Answer 1

アドバイスというかほぼ答えな実装手順ですが
0. 背景緑にするclass(style)を定義する　※仮に**.bg-green**という名前でも付ける
0. クリックするごとに作ったclassを付けたり外したりする

で、classの付け外しにはelement.classList.toggle(クラス名);を利用出来ます
他にも調整するべき点が見つかると思うので必要に応じて調整しましょう

追記

スタイルシートの適用にはパワーバランスを考えなければいけません
という事で以下のようにコメントに書かれていたコードを修正しました

<div id="button" class='button'>button</div>

#button{
display: inline-block;
text-decoration: none;
font-size: 30px;
color: #FFF;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
text-align: center;
transition: .4s;
cursor: pointer;
}

.button{
background: #000000;
}
.button:hover{
background: #0000ff;
}

.button_js:hover{
background: #008000;
}

{
const button = document.getElementById('button');
button.addEventListener('click', () => {
　button.classList.toggle('button_js');
　});
}

具体的には

• backgroundをclassでの指定に切り出しました。
• toggleの誤りの修正

elementというのはgetElementByIdなどで取得出来るelementの事です。

Comments

[amby]

ありがとうございます。下記のように修正してみました。ただうまく作動せず、間違っている点ございますでしょうか。。。

●HTML
<div id="button">button</div>

●CSS
#button{
display: inline-block;
text-decoration: none;
background: #000000;
font-size: 30px;
color: #FFF;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
text-align: center;
transition: .4s;
cursor: pointer;
}

#button:hover{
background: #0000ff;
}

.button_js:hover{
background: #008000;
}

●JavaScript
'btn-change'
{
const button = document.getElementById('button');
button.addEventListener('click', () => {
　button.element.classList.toggle('button_js');
　});
}

[hentaiman]

idでのスタイル指定はクラスより重い！

[amby]

大変丁寧にご教示いただき誠にありがとうございました。。。！！！

Answer 2

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.button').forEach(x=>{
    x.addEventListener('click',()=>{
      x.classList.toggle('button_js');
    });
  });
});