Absolute newbie - first function question

Just started learning JS and have a question on my first function.

I am trying to add an image overlay to another image based on the condition of the text content of an h4 tag.

I am getting an error: null is not an object (evaluating ‘textStatus.textContent’)

const textStatus = document.querySelector('h4.status');
const statusText = textStatus.textContent;
const mainImage = document.querySelector('.main-image');

function statusSnipe(){
    if(statusText === "Rental Status: Rented"){
        mainImage.classList.add('rental-snipe-rented');
    };
};
statusSnipe();

As I said this is my first function - I look forward to your replies.

…and your html?

It suggests possibly that <h4 class='status'>...something here</h4> doesn’t exist or that you need to move your script down to the bottom of the page just before the closing body tags. That way the page content has loaded and the javascript has something to look for.

<body>
  <h1 class='status'>...text here</h4>
.
.
.
<script>
  javascript here
</script>
</body>
2 Likes