Question

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

2017-03-05

23426

javascript html

我在尝试跟进 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 底部正文结束标记之前且没有查询到名称匹配元素的常见解决方案并不适用。我对这两件事进行了三次检查，甚至根据某人的建议添加了 JQuery .ready 函数以确保页面正在加载。

我在控制台中为上面引用的所有行设置了断点，并逐步执行了代码，在失败之前，我的变量似乎已定义且不为 NULL。请参阅附件或下方的图片。

代码单步执行

“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 周，所以无论谁能帮我解决这个问题，他都会是我最喜欢的人。

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

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