Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I've encountered this error below when trying to follow along on a Udemy JS project. 3 of my full time dev friends can't figure it out and I've read 10 - 15 StackOverflow articles about this error as well as its variations and nothing seemed to apply.

Here's the common 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)
It seems pretty straight forward but the common solutions of placing the script at the bottom of the HTML right before the closing body tag and not having a matching element by the name queried do not apply.  I've triple checked both things and even added the JQuery .ready function at someone's suggestion to ensure the page was loading.
I've set break points in the console for all line referenced above and stepped through the code and directly before the failure it looks like my variable is defined and is not NULL.  See picture attached or below.
Code Step Through
That 'budget__value' totally exists in the html.
        <div class="top">
            <div class="budget">
                <div class="budget__title">
                    Available Budget in <span class="budget__title--month">%Month%</span>:
                <div class="budget__value">+ 2,345.64</div>
Here is a Fiddle of my code.  I've also pushed it up to Github (/Laflamme02/BudgetApp) if you want to see what I'm getting myself into here. 
I've been struggling with this for at least 2 weeks so whoever helps me solve this will be my favorite person ever.
You forgot the dot in front of the class name in your DOMString.budgetLabel. It should read:
document.querySelector('.budget__value').textContent = obj.budget
From your JSFiddle, you can see that you forgot to put the dot in front of several other strings as well: incomeLabel, expensesLabel, and percentageLabel. All four are simple fixes.
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'
                This is my favorite thing to have ever felt stupid about.  @gyre, you are my new favorite person.  Thank you very much.
– theChrisFlame
                Mar 5, 2017 at 0:45
                Glad to help! Also, I just checked your JSFiddle and there are three more typos like that one. See my edited post above.
– gyre
                Mar 5, 2017 at 0:50
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.