未捕获的类型错误：无法将属性“textContent”设置为 null答案

【问题标题】：Uncaught TypeError: Cannot set property 'textContent' of null未捕获的类型错误：无法将属性“textContent”设置为 null
【发布时间】：2020-05-08 22:09:28
【问题描述】：

我在尝试跟进 Udemy JS 项目时遇到了以下错误。我的 3 个全职开发者朋友无法弄清楚，我已经阅读了 10 到 15 篇有关此错误及其变体的 StackOverflow 文章，但似乎没有任何内容适用。

这是常见的错误：

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)

这看起来很简单，但是将脚本放置在 HTML 底部的结束 body 标记之前并且没有与所查询名称匹配的元素的常见解决方案不适用。我已经三重检查了这两件事，甚至根据某人的建议添加了 JQuery .ready 函数以确保页面正在加载。

我已经在控制台中为上面引用的所有行设置了断点，并单步执行了代码，并且在失败之前，它看起来就像我的变量已定义并且不为 NULL。见附图或下面。

Code Step Through

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

这是我的代码的Fiddle。如果你想看看我在这里做什么，我也把它推到了 Github (/Laflamme02/BudgetApp)。

我已经为此苦苦挣扎了至少 2 周，所以帮助我解决这个问题的人将是我最喜欢的人。

【问题讨论】：

标签： javascript html

【解决方案1】：

您忘记了DOMString.budgetLabel 中班级名称前面的点。它应该是：

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

从您的 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'
};

【讨论】：

这是我最喜欢的事情，但我觉得自己很愚蠢。 @gyre，你是我最喜欢的新人。非常感谢。
很高兴为您提供帮助！另外，我刚刚检查了您的 JSFiddle，还有另外三个类似的错别字。请参阅上面我编辑的帖子。

【解决方案2】：

const myHeading=document.querySelector('h1');
myHeading.textContent='Hello World';

<html>
    <head>
        <title>

        </title>
        
    </head>
    <body>
        <h1></h1>
        <script src="main.js"></script>
    </body>
</html>

【讨论】：