未捕获的TypeError：无法设置null的属性'textContent'

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 * articles about this error as well as its variations and nothing seemed to apply.

我在尝试按照Udemy JS项目时遇到了这个错误。 3我的全职开发朋友无法弄清楚我已经阅读了10 - 15篇*文章关于这个错误以及它的变化,似乎没有什么适用。

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.

这似乎很简单,但是在关闭正文标记之前将脚本放在HTML底部并且没有通过查询的名称匹配元素的常见解决方案不适用。我已经对这两件事进行了三重检查,甚至在某人的建议中添加了JQuery .ready函数以确保页面正在加载。

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.

我已经在控制台中为上面引用的所有行设置了断点并逐步完成了代码,并且直接在失败之前看起来我的变量被定义并且不是NULL。见附图或下图。

Code Step Through

代码逐步完成

That 'budget__value' totally exists in the html.

那个'budget__value'完全存在于html中。

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

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.

这是我的代码的小提琴。我还把它推到了Github(/ Laflamme02 / BudgetApp),如果你想看看我在这里得到的东西。

I've been struggling with this for at least 2 weeks so whoever helps me solve this will be my favorite person ever.

我一直在为此奋斗至少2周,所以无论谁帮我解决这个问题都将是我最喜欢的人。

1 个解决方案

#1

You forgot the dot in front of the class name in your DOMString.budgetLabel. It should read:

您忘记了DOMString.budgetLabel中类名前面的点。它应该是:

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.

从您的JSFiddle中,您可以看到您忘记将点放在其他几个字符串前面:incomeLabel,expensesLabel和percentageLabel。这四个都是简单的修复。

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'
};

#1