Can't get my HTML to update with string from array in my js file - Uncaught TypeError: Cannot set property 'innerHTML' of null

JavaScript
1

Hello helpful people of the interwebs. Thanks for taking the time to help.

My pen.

Its the quote genorator project that I’m working on. When I click my ‘New Quote’ button I don’t get the desired output. I get nothing, no change. When I look at the error in chrome dev tools it says:

pen.js:18 Uncaught TypeError: Cannot set property ‘innerHTML’ of null
at newQuote (pen.js:18)
at HTMLButtonElement.onclick (index.html:20)

My newQuote() function is:

function newQuote(){
  var quoteNum = Math.floor(Math.random() * (quoteArr.length));
  document.getElementById('dq').innerHTML = quoteArr[quoteNum];
}

The .onclick I think it is referring to is this:

  <button onclick="newQuote()">New Quote</button>

the div that the newQuote() writes to is:

 <div style="color:black;" id=-"dq">
  </div>

Any help is appreciated. If I haven’t provided enough info please let me know.

2

Reread what the error message says. This means that document.getElementById('dq') evaluates to null, because you don’t have an element with that id. The reason for that is that your HTML syntax is malformed.

1 Like
3

Like the poster above said. Look carefully at the line `<div style=“color:black;” id=-“dq”>. It has an error.

General tips:
pen.js:18 Uncaught TypeError: Cannot set property ‘innerHTML’ of null
This means the document.getElementById(‘dq’) is evaluating to null. Which probably means you’ve written the wrong id somewhere, either in the javascript or the HTML.

In your case, the minus sign (-) before the “dq” shouldn’t be there. If you remove it the code works.
This is the corrected line <div style="color:black;" id="dq">

2 Likes
4

Hey guys. Thanks a lot for taking a look. What a banana! Not sure how I missed that.

Your explanations of how to understand the error message helped. With that I should be able to catch these easy errors in the future.

Really appreciate the community help!

1 Like