如何修复未捕获的类型错误：无法在 wordpress 的 javascript 中设置 null 的属性“innerHTML”？

Question

 const printSentence = (id, sentence, speed = 50) => { let index = 0; let element = document.getElementById(id); let timer = setInterval(function() { const char = sentence[index]; if (char === '<') { index = sentence.indexOf('>', index); // skip to greater-than } element.innerHTML = sentence.slice(0, index); if (++index === sentence.length) { clearInterval(timer); } }, speed); } // printSentence printSentence( 'one', '<h2>Wordpress</h2>', 50 );

 <div id="one"></div>

But I see an error in console:

Uncaught TypeError: Cannot set property 'innerHTML' of null

I tried window.onload but it doesn't work
Any tip of how to fix this problem in console?

Answer 1

The error message is telling you that ELEMENT is null

This means that let element = document.getElementById(id); is returning null. (Add a console.log of element, to check, if you like).

Most likely reason for this is that there is no tag with id "one".

Look at the HTML of the page on which this is being run

Make sure that it has a tag with id "one". The commonest reason for getting into this situation is that the DOM doesn't contain the element with id "one" at the time the javascript is running.

That is why it is best to use the icon to enter your code so that it can be replicated easily by others.

Now we have your snippet, it seems to be working correctly

It is showing a slowly-appearing text in the output window. In the console log, I am seeing an irrelevant error message, perhaps something to with security.

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at Object.vAPI.bootstrap (chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:1755:46)
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:1764:6

If it is working for you too, but you are concerned about your error message that you described, why don't you do this:

Change

element.innerHTML = sentence.slice(0, index);

to

if(element){
  element.innerHTML = sentence.slice(0, index);
} else {
  console.log("Cannot do element.innerHTML. The current value of element is ",element,". Index is currently ",index)
}