クリックしてボタンの背景色を変更するにはjavascriptを使用しますか？

-1

私は4つのボタンを持っています。そのうちの1つをクリックすると、そのボタンの背景色は青色になります。そのボタンがクリックされていない場合は、同じ色（赤色の色）にします。どうすればいいのですか？クリックしてボタンの背景色を変更するにはjavascriptを使用しますか？

現在、1つのボタンに対してのみ機能します。別のボタンをクリックするたびに、クリックしたボタンの色が変わります。

編集1：ここに私の更新コードがあります。

function buttonFunction() { 
    var buttons = new Array("button", "button1", "button2", "button3", "button4"); 
for (var i in buttons) {  
     if (onclick = true) { 
      document.getElementById(buttons[i]).style.backgroundColor = "blue"; 
     } 
    } 
} 

<body id="Body"> 
    <!-- Navigation bar setup --> 
    <header id="Mainheader"> 
     <nav id="Navigation"> 
      <form> 
       <button type="button" value="submit" class="Button" onclick="buttonFunction()" id="button"><a href="index.html" class="Button-link" >Introduction</a></button> 
       <button type="button" value="submit" class="Button" onclick="buttonFunction()" id="button"><a href="History-of-astronomy.html" class="Button-link">History of Astronomy</a></button> 
       <button type="button" value="submit" class="Button" onclick="buttonFunction()" id="button"><a href="Observational-Astronomy.html" class="Button-link" >Observational Astronomy</a></button> 
       <button type="button" value="submit" class="Button" onclick="buttonFunction()" id="button"><a href="" class="Button-link">More on Astronomy</a></button> 
      </form> 
     </nav> 
    </header>  
    <!-- Navigation bar setup (complete) -->

出典

2016-11-30 GroxTheProgrammer

1）のみ* *関連するコードを示してください。 2）空の括弧を使って 'for'とは何をするのですか？ 3） '=='のための*比較* '=' *割り当て* ... – Li357

oops.nothing。それを削除する必要があります。 – GroxTheProgrammer

とにかく私は今寝る必要があります（それは午後11時30分です）。明日話してください。 – GroxTheProgrammer

それのonclickの機能と変更スタイルでボタンの参照を渡します。

function buttonFunction(el) { 
 
    el.style.backgroundColor = "red"; 
 
}

<button type="button" value="submit" class="Button" onclick="buttonFunction(this)"><a href="index.html" class="Button-link">Introduction</a> 
 
</button> 
 
<button type="button" value="submit" class="Button" onclick="buttonFunction(this)"><a href="History-of-astronomy.html" class="Button-link">History of Astronomy</a> 
 
</button> 
 
<button type="button" value="submit" class="Button" onclick="buttonFunction(this)"><a href="Observational-Astronomy.html" class="Button-link">Observational Astronomy</a> 
 
</button> 
 
<button type="button" value="submit" class="Button" onclick="buttonFunction(this)"><a href="" class="Button-link">More on Astronomy</a> 
 
</button>

出典

2016-11-30 03:38:00

ありがとう、それは今働いている。あなたの答えも受け入れました。 – GroxTheProgrammer

更新クリックハンドラ関数：

function buttonFunction(btn) { 
    btn.style.backgroundColor = "blue"; 
}

とにボタンの宣言を変更：

<button type="button" value="submit" class="Button" onclick="buttonFunction(this)" id="button"><a href="" class="Button-link">More on Astronomy</a></button>

出典

2016-11-30 03:37:07 ntahoang

作業していません。何も変えていないだけです。 – GroxTheProgrammer

クリックしてボタンの背景色を変更するにはjavascriptを使用しますか？

答えて

関連する問題