2016-06-23 20 views
1

Ich versuche, die Farbe einer Seitenleiste in meinem Programm zu ändern. Ich versuche das nur mit JavaScript zu tun, bitte keine JQuery. Farbwechsel mit Knopf

Dies ist der HTML-Code für meine Sidebar:

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

Alles andere in meinem Programm läuft gut, aber wenn ich in der Funktion gesetzt für die Farbänderung keiner meiner Funktionen mehr. Ich denke, die Antwort wird so offensichtlich sein, aber ich lerne immer noch. Jede Hilfe wäre willkommen!

+0

Normalerweise, wenn keine meiner Javascript funktioniert nach dem Hinzufügen von einigen neuen Javascript, ist es in der Regel, weil es einen Fehler passiert, stoppt die Ausführung. – Rasclatt

Antwort

1

Diese Zeile:

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

... sucht nach einem Element mit einer ID, die nicht existiert. Ihr Element hat eine Klasse von "receipt".

So wird die folgende Zeile:

sideReceipt.style.borderColor = "#ee4c11"; 

... wird TypeError: Cannot read property 'style' of null einen Fehler geben.

The fix ist das div zu ändern, um id="receipt" zu haben.

(Ich kann nicht erklären, warum keine Ihrer Funktionen arbeiten, nachdem Sie diese Funktion hinzufügen, weil es tatsächlich keine Syntaxfehler enthält, so wie es ist, so wird es nur einen Fehler geben, wenn Sie tatsächlich klicken die Taste, die es nennt.)

0

Bitte id in Haupt-div wie für Id nicht unter

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

Sie haben ein div mit class = „Empfang“ und immer in JavaScript von getElementById und seine Suche hinzufügen für Klasse. Bitte ändern Sie die Klasse in ID und es wird gut funktionieren.