如何修复“Uncaught TypeError：无法设置属性'innerHTML'为null”

Question

My code compares two arrays and shows items that are in both arrays. I can get this to successfully print to the console to transform a paragraph is proving more challenging.

Uncaught TypeError: Cannot set property 'innerHTML' of null at compareArrays (pen.js:25) at HTMLButtonElement.onclick (index.html?key=iFrameKey-ae252606-6389-a594-b844-2cecca064c7d:20) compareArrays @ pen.js:25 onclick @ index.html?key=iFrameKey-ae252606-6389-a594-b844-2cecca064c7d:20

I understand I have to use the innerHTML method but unsure what my errors mean

<button id="search" onclick="compareArrays()" required>Search</button>
<p id="results"></p>

function compareArrays () {
  // Interate the first array
  for (var i = 0; i < restaurantsOne.length; i++) {
    // Iterate the second array 
    for (var j = 0; j < restaurantsTwo.length; j++){
      // Compare the two arrays
      if (restaurantsOne[i] == restaurantsTwo[j]){
        // console.log(restaurantsOne[i]);
        // Show results in paragraph
        document.getElementById("#results").innerHTML = restaurantsOne[i] 

      }
    }
  }
 }

Ultimate I would like each item, restaurantsOne[i], that is in both arrays to print to a new paragraph.

Answer 1

I think that's because of your document.getElementById.

It should be like this

    document.getElementById("results").innerHTML = restaurantsOne[i] 

(no #)

The # can be used with the document.querySelector method

Answer 2

The DOM doesn't exist at the time your script is running, so no element is found.

Either move your script to the bottom of your HTML page:

  <script>...</script>
</body>

Or wrap it all in an onload listener:

window.onload = function() {
  // All your code
};

Also note that your ID most likely doesn't contain a # - you probably don't have or want this:

<p id="#results"></p>

Either remove it:

document.getElementById("results")

Or use querySelector :

document.querySelector("#results")