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 mon 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 mon 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.
<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.
I've been struggling with this for at least 2 weeks so whoever helps me solve this will be my favorite person ever.
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 mon 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 mon 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.
<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.
I've been struggling with this for at least 2 weeks so whoever helps me solve this will be my favorite person ever.
Share Improve this question asked Mar 5, 2017 at 0:30 theChrisFlametheChrisFlame 1731 gold badge2 silver badges8 bronze badges2 Answers
Reset to default 3You 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: ineLabel, expensesLabel, and percentageLabel. All four are simple fixes.
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add__description',
inputValue: '.add__value',
inputBtn: '.add__btn',
ineContainer: '.ine__list',
expensesContainer: '.expenses__list',
budgetLabel: 'budget__value',
ineLabel: 'budget__ine--value',
expensesLabel: 'budget__expenses--value',
percentageLabel: 'budget__expenses--percentage'
};
const myHeading=document.querySelector('h1');
myHeading.textContent='Hello World';<html>
<head>
<title>
</title>
</head>
<body>
<h1></h1>
<script src="main.js"></script>
</body>
</html>