ボタンで色を変更する

Question

私のプログラムでサイドバーの色を変更しようとしています。 JavaScriptだけでこれをやろうとしていますが、JQueryは必要ありません。

この

は私のサイドバーのHTMLです：私のプログラムで他の

<div class = "sidebar"> 
     <div class = "receipt"> 
      <table id = "sideTable"> 
       <tr class = "sideTR"> 
        <th id = "sideTH" class = "h22">RECEIPT</th> 
       </tr> 
       <tr class = "sideTR"> 
        <td class = "sideTD"> 
        <div class = "submit"> 
         <input type = "button" onclick = "changeColour()" value = "Change Colour"> 
        </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 

すべてがうまく動作しますが、私は私の機能の色の変化なしのための機能に入れたときにはもう働きます。私は答えがとても分かりやすいように感じますが、私はまだ学んでいます。どんな助けもありがとう！

Answer 1

このライン：

var sideReceipt = document.getElementById("receipt"); 

...存在しないidを持つ要素を探しています。あなたの要素はクラスの"receipt"です。それでは

次の行：

sideReceipt.style.borderColor = "#ee4c11"; 

は...エラーTypeError: Cannot read property 'style' of nullを与えるでしょう。

The fixは、そのdivをid="receipt"に変更することです。

（理由は説明できません。はありません。機能を追加した後は実際には何も構文エラーがないため、実際にクリックするとエラーが発生するため機能のは機能しません。あなたは、クラス=「領収書」とdiv要素を持っているし、getElementByIdを によってJavaScriptで取得し、そのは、IDのためではない探し

<div class = "sidebar"> to <div class="sidebar" id="sidebar"> 

Answer 2

は、メインのdivにIDを追加してください。クラス。クラスをidに変更してください。正常に動作します。

Answer 3

以下のようにそれを呼び出すボタン。）