2017-03-05 11 views
2

Ich habe diesen Fehler unten beim Versuch, auf einem Udemy JS-Projekt zu folgen, festgestellt. 3 meiner Vollzeit-Dev-Freunde können es nicht herausfinden und ich habe 10 bis 15 StackOverflow-Artikel über diesen Fehler sowie seine Variationen gelesen und nichts schien zutreffen.Uncaught TypeError: Eigenschaft 'textContent' von null kann nicht festgelegt werden

Hier ist der gemeinsame errror:

Uncaught TypeError: Cannot set property 'textContent' of null 
    at Object.displayBudget (app.js:177) 
    at updateBudget (app.js:219) 
    at ctrlAddItem (app.js:236) 
    at HTMLDocument.<anonymous> (app.js:205) 

Es ziemlich geradlinig scheint aber die gemeinsamen Lösungen von dem Skript am Ende des HTML direkt vor dem schließenden Body-Tag platzieren und kein passendes Element mit dem Namen mit abgefragt nicht anwenden. Ich habe drei Dinge geprüft und sogar die JQuery .ready-Funktion bei jemandes Vorschlag hinzugefügt, um sicherzustellen, dass die Seite geladen wurde.

Ich habe Break-Punkte in der Konsole für alle oben genannten Zeile gesetzt und trat durch den Code und direkt vor dem Fehler sieht es aus wie meine Variable definiert ist und ist nicht NULL. Siehe Bild angehängt oder unten.

Code Step Through

Das ist budget__value 'völlig in den HTML-Code vorhanden ist.

<body> 

     <div class="top"> 
      <div class="budget"> 
       <div class="budget__title"> 
        Available Budget in <span class="budget__title--month">%Month%</span>: 
       </div> 

       <div class="budget__value">+ 2,345.64</div> 

Hier ist ein Fiddle meines Codes. Ich habe es auch auf Github (/ Laflamme02/BudgetApp) gedrängt, wenn du sehen willst, worauf ich mich hier einlasse.

Ich habe seit mindestens 2 Wochen damit zu kämpfen, also wer auch immer mir hilft, das zu lösen, wird meine Lieblingsperson überhaupt sein.

Antwort

1

Sie haben den Punkt vor dem Klassennamen in Ihrem DOMString.budgetLabel vergessen. Es sollte lauten:

document.querySelector('.budget__value').textContent = obj.budget 

Von Ihrem JSFiddle können Sie sehen, dass Sie den Punkt vor mehreren anderen Saiten und setzen vergessen: incomeLabel, expensesLabel und percentageLabel. Alle vier sind einfache Korrekturen.

var DOMstrings = { 
    inputType:   '.add__type', 
    inputDescription: '.add__description', 
    inputValue:   '.add__value', 
    inputBtn:   '.add__btn', 
    incomeContainer: '.income__list', 
    expensesContainer: '.expenses__list', 
    budgetLabel:  'budget__value', 
    incomeLabel:  'budget__income--value', 
    expensesLabel:  'budget__expenses--value', 
    percentageLabel: 'budget__expenses--percentage' 
}; 
+0

Das ist mein Lieblingssache, sich jemals dumm gefühlt zu haben. @gyre, du bist meine neue Lieblingsperson. Vielen Dank. – theChrisFlame

+0

Gut zu helfen! Außerdem habe ich gerade Ihren JSFiddle überprüft und es gibt drei weitere Tippfehler wie diesen. Siehe meinen editierten Beitrag oben. – gyre

Verwandte Themen