Search Redirecting to Broken Page With Error

On this page in the left sidebar where you see ‘Search’, after entering in a term and hitting the ‘Enter’/‘Return’ key, it loads a broken search results page.

Looking at the theme templates (no, I didn’t develop the site), I’m not seeing anything outstanding that would cause the problem. So the only thing I can figure is that age of the theme may not be fully compatible with the latest WordPress.

I notice there is an error on the page in the browser Console:
(index):649 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')

Looking at the code reference, I see this:
document.querySelector('.blog-parent').insertAdjacentHTML('beforeend', '<div class="showPostsButton" onclick="showPosts();">MORE POSTS</div>');

I could use some schooling on how to solve the error and come to better understand what the error means (aside from the fact that it claims there’s a Null value).

Thank you.

You’ve got two scripts which attempt to use the blog-parent class in the querySelector. The first is marked BEFORE the code, and one AFTER. My guess is it’s the one before that is failing because the element hasn’t been loaded into the DOM yet.

Moving it to after the element is created may help, though wrapping that whole bit to fire when the DOM is loaded is probably the better choice

In my opinion,

The error message you provided, “Uncaught TypeError: Cannot read properties of null (reading ‘insertAdjacentHTML’)”

The line of code that’s causing the error is:

document.querySelector(‘.blog-parent’).insertAdjacentHTML(‘beforeend’, ‘

MORE POSTS
’);

Here’s a step-by-step explanation of what’s happening

document.querySelector(‘.blog-parent’): This code attempts to select an element with the class “blog-parent”. If such an element exists, it will be returned; otherwise, it will return null.

insertAdjacentHTML(‘beforeend’, ‘

MORE POSTS
’)
If the element with the class “blog-parent” is found, this code tries to insert the provided HTML code just before the end of that element. It seems that the error is occurring in this part of the code because ‘insertAdjacentHTML’ is being called on a null object.

Now, the reason for the error could be that there is no element with the class “blog-parent” on the page, or it might not be accessible at the time this script is executed.

To solve the error, you can check if the element with the class “blog-parent” exists before attempting to insert the HTML.

You can modify the code as follows:

const blogParentElement = document.querySelector(‘.blog-parent’);
if (blogParentElement) {
blogParentElement.insertAdjacentHTML(‘beforeend’, ‘

MORE POSTS
’);
}

By adding this check, you ensure that the insertAdjacentHTML function is only called if the “blog-parent” element exists on the page, which should prevent the error from occurring.

Thank you, @DaveMaxwell and @sansiraj62.
I’m going to go back and do the checks that you recommend. @sansiraj62, thank you VERY MUCH for the thorough explanation. No doubt this is going to help solve the issue!

1 Like

I have found that the biggest problem is that the template code is not compatible with PHP 8. The code, however, is compatible with 7.4 when downgraded. So I guess that the old code just opens up a can of worms with PHP 8.x.

Thank you for your help, @DaveMaxwell and @sansiraj62. I guess I’ll just have to do some redevelopment from here.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.