Absolute newbie - first function question

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.

Answer 1

Aha! Got it to work. I added the event listener as Ray suggested, and moved the function invoke to within the event listener and it works. Thank you for all your input. Now I need to figure a way to create if/else or switch statements to add different image overlays for "Available" and "On Hold".

document.addEventListener('DOMContentLoaded', () => {  
const textStatus = document.querySelector('h4.status');
    // const statusText = textStatus.textContent;
    const mainImage = document.querySelector('.main-image');

    function statusSnipe(){
        if(textStatus.innerText === "Rental Status: Rented"){
            mainImage.classList.add('rental-snipe-rented');
        }
        else if(textStatus.innerText === "Rental Status: On Hold"){
            mainImage.classList.add('rental-snipe-hold');
        } else {};
    }
statusSnipe();
});

.main-image {position: relative;}
.rental-snipe-rented::before {
    content: '';
    background-image: url("http://www.j2studio.com/grg3910/images/new-rented-snipe.png");
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	z-index:9;
}
.rental-snipe-hold::before {
content: '';
background-image: url("http://www.j2studio.com/grg3910/images/on-hold-snipe.png");
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
width: 100%;
height: 100%;
z-index:9;
}
.rental-status-text {color: #aaa;}

<div class="tm-grid-expand uk-grid-margin uk-grid" uk-grid="">
<div class="uk-width-2-3@m uk-first-column">
    
        
            
            
                
<div data-id="template-rWLyq4-M#0-1-0-1" class="main-image uk-margin uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
        <img class="el-image uk-box-shadow-large" alt="" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/Living1-76731dac.jpeg">    
    
</div>

            
        
    
</div>

<div class="uk-width-1-3@m">
    
        
            
            
                
<h4 class="status uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-0" uk-scrollspy-class="" style="">        <span class="rental-status-text">Rental Status: </span>On Hold    </h4>
<h2 class="uk-h2 uk-margin-remove-vertical uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-1" uk-scrollspy-class="" style="">        <sup>$</sup>950<sup>/mth</sup>    </h2><div class="uk-margin uk-width-medium@m uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-2" uk-scrollspy-class="" style="">Spacious 3 Bedroom/1 Bathroom Home - No Carpet - Updated Kitchen - Inside Utility - Pet Friendly!</div>
<div data-id="template-rWLyq4-M#0-1-1-3" class="uk-margin">
    <div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@xl uk-grid-row-small uk-grid-match uk-grid uk-grid-stack" uk-grid="">        <div class="uk-first-column">
<div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
                        
                    

        
        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><svg id="f5c2a82f-a8ae-474e-9bef-87f89d00969d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="af4b105e-d1a5-49c8-ba95-4c7b70b26c69" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="aadd5cd5-ccc4-4f5c-b030-67875e2a080b" data-name="Layer 3"><path d="M9.49,22.52h7.78l.38-.55-.54-.38V19.9H9.49v-.75h7.66v-.44l3.69-4.87V7.32H18.48V8.46h-.76V7.32h-2V8.46H15V7.32H13V8.46h-.76V7.32h-2V8.46H9.53V7.32H7.16v18.5H20.85V22l-2,.79-.54-.38-.61.87H9.49Zm11-1.18-1.53.6-1.05-.74V19.56l2.55,1.78Zm-2.37-2.58,5.64-7.46,2.5,1.76-5.07,7.85Zm6.13-8L26.6,12.4a1.69,1.69,0,0,0-.29-2.14,1.71,1.71,0,0,0-2.1.46ZM27,13.28l-5.37,8.31v5H6.4v-20H9.53V5.42h.76V6.56h2V5.42H13V6.56h2V5.42h.76V6.56h2V5.42h.76V6.56h3.13v6.27l1.64-2.16c.8-1.07,2.26-1.89,3.5-1s1,2.54.23,3.64ZM16.71,14.43,16.27,14v2.51H11.74V14l-.43.41-.52-.55,3-2.76.26-.24.26.24,3,2.76-.52.55Zm-1.19-1.11v2.45h-3V13.32L14,11.91Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Date Available:</strong>  14 May 2020</div>        
        
        
        
        
    
</div></div>
        <div class="uk-grid-margin uk-first-column">
<div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
                        
                    

        
        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><svg id="b83822a7-14c4-449a-bffa-a9b54d2aca77" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="bf7f72a3-79a5-4e4b-bc33-1c2a0d18bd51" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="af72ee32-b475-4a80-9f1f-4041cb45286d" data-name="Layer 1"><path d="M10.32,17.41H7.81v2.51h2.51Zm17.45-4.27V22.8H18.09V16.57H13.91V22.8H4.23V13.14H12l4-4.28,4,4.28ZM4.59,12.3h7L16,7.64l4.39,4.66h7L21.18,5.2H10.81Zm24,.09V23.64H17.25V17.41h-2.5v6.23H3.39V12.39l7-8H21.56l7.05,8Zm-4.42,5H21.68V19.9h2.51V17.41Zm.84-.84H20.84v4.19H25V16.55Zm-13.87,0v4.19H7V16.57Z" fill="#fff" fill-rule="evenodd"></path></g></svg>  <strong>Residence Type: </strong>Single Family</div>        
        
        
        
        
    
</div></div>
        <div class="uk-grid-margin uk-first-column">
<div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
                        
                    

        
        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="a926b529-8e3b-4a85-b852-f16bccf15968" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="f1687f64-ca8f-4abb-9535-fab97947c724" data-name="Layer 1"><path d="M22.64,13.27a5,5,0,0,0-3.13-.87,5,5,0,0,0-3.13.87v.46h6.26v-.46Zm4.14,9.42H5.23v1.68H4.46v-5.1L8.59,14V7.63h.77V9.17H22.64V7.63h.77V14l4.13,5.28v5.1h-.76V22.69ZM5.23,21.93H26.78V19.78H5.23v2.15Zm10.39-8.2v-.46a5,5,0,0,0-3.13-.87,5,5,0,0,0-3.13.87v.46ZM26.37,19,22.84,14.5H9.16L5.63,19ZM22.64,9.94v2.4a6.57,6.57,0,0,0-3.13-.7,6.08,6.08,0,0,0-3.51.95,6.08,6.08,0,0,0-3.51-.95,6.57,6.57,0,0,0-3.13.7V9.94Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Bedrooms: </strong>3</div>        
        
        
        
        
    
</div></div>
        <div class="uk-grid-margin uk-first-column">
<div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
                        
                    

        
        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><svg id="aacfd61b-f492-4e96-b3c7-9594675cd011" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="ec7019f1-cb29-4191-8955-9e1cf3b7e618" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="bacb411f-8d14-4e9e-af06-8af666522762" data-name="Layer 4"><path d="M5.88,15.27,11.36,17a18,18,0,0,0,5.78.89h9.6l-.09.45-1,4.78a2.88,2.88,0,0,1-2.87,2.54h-.66l.61,1.39-.68.3-.74-1.69H11.39l-.74,1.69-.69-.3.61-1.39H9.92A2.89,2.89,0,0,1,7,23.16L5.4,15.7l-.14-.63Zm6.48-4.94h-.75v5h.75Zm2.69,1H14.3v4.55h.75V11.33Zm2.69,0H17V16h.74V11.33Zm2.7-1h-.75v5.73h.75Zm-4-7.72V6.5h6.23v.75H20.74A4.55,4.55,0,0,1,19,9.07a6,6,0,0,1-6,0,4.5,4.5,0,0,1-1.72-1.82H9.41V6.5h6.24V2.61Zm3.48,4.64H12.17a3.81,3.81,0,0,0,1.25,1.18,5.2,5.2,0,0,0,5.21,0,3.81,3.81,0,0,0,1.25-1.18Zm-8.74,10.5L6.27,16.18,7.77,23a2.15,2.15,0,0,0,2.15,2H22.78a2.13,2.13,0,0,0,2.14-2l.9-4.34H17.14a19.07,19.07,0,0,1-6-.91Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Bathrooms: </strong>1</div>        
        
        
        
        
    
</div></div>
        <div class="uk-grid-margin uk-first-column">
<div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
                        
                    

        
        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><svg id="f66d02d0-648e-4973-b0d6-03149c0e4a34" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="b586850a-7579-41cd-85fe-2df77250fb87" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="a5c19eb4-9dd9-4d22-976a-05512768b0ac" data-name="Layer 1"><path d="M6.05,5.63H26.37V26.37H5.63V5.63ZM25.52,19.79H13.32v5.73h12.2Zm-13,0h-6v5.73h6Zm-6-.85h19V13.06h-19Zm0-6.73h12.2V6.48H6.48v5.73Zm13.05,0h6V6.48h-6Z" fill="#fff" fill-rule="evenodd"></path></g></svg>  <strong> Square Feet: </strong>1088</div>        
        
        
        
        
    
</div></div>
        <div class="uk-grid-margin uk-first-column">
<div class="el-item uk-panel uk-margin-remove-first-child uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
                        
                    

        
        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><svg id="b59345cd-3c40-4504-a86e-a520304b6ed6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="b7e5b9e6-f457-499e-893b-2e586346f98b" data-name="Layer 2"><circle cx="16" cy="16" r="16" fill="#2d9546"></circle></g><g id="a41873e6-b1f3-47ac-8451-f911d2ed1890" data-name="Layer 3"><path d="M9.3,13.94a6.58,6.58,0,0,1-1.77-3.18,10.07,10.07,0,0,1-.12-4.37l.1-.51L8,6.11l2.47,1.25a4.68,4.68,0,0,1,3.09,0L16,6.11l.46-.23.09.51a10.41,10.41,0,0,1,.15,2.84,9.22,9.22,0,0,1-.57,2.48,15.33,15.33,0,0,0,2.67,4.07c1.94,2.37,3.95,4.82,3.7,9.19,3-3,1.55-6.45.19-9.77a15.54,15.54,0,0,1-1.54-5.58h.77a15.25,15.25,0,0,0,1.48,5.29c1.55,3.78,3.15,7.69-1,11.21H7v-.47c0-.76,0-2.89,2.33-3.23V13.94Zm-1-3.38A5.69,5.69,0,0,0,10,13.47l.14.12v9.54H9.74a2,2,0,0,0-2,2,1.48,1.48,0,0,0,0,.21h14c.38-4.35-1.59-6.76-3.5-9.08a15.72,15.72,0,0,1-2.86-4.43l-.05-.14.06-.14A8.32,8.32,0,0,0,16,9.14,9.6,9.6,0,0,0,15.87,7L13.72,8.12l-.15.08-.16-.06A4,4,0,0,0,12,7.87a4,4,0,0,0-1.44.27l-.16.06-.15-.08L8.09,7a9.08,9.08,0,0,0,.18,3.56Z" fill="#fff" fill-rule="evenodd"></path></g></svg> <strong>Pets Allowed? </strong>conditional</div>        
        
        
        
        
    
</div></div>
        </div>

</div>

<div data-id="template-rWLyq4-M#0-1-1-4" class="uk-margin uk-text-center uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
    
    
        
        
<a class="el-content uk-button uk-button-default" title="Apply now." href="/grg3910/rental-application">

        <span uk-icon="pencil" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="pencil"><path fill="none" stroke="#000" d="M17.25,6.01 L7.12,16.1 L3.82,17.2 L5.02,13.9 L15.12,3.88 C15.71,3.29 16.66,3.29 17.25,3.88 C17.83,4.47 17.83,5.42 17.25,6.01 L17.25,6.01 Z"></path><path fill="none" stroke="#000" d="M15.98,7.268 L13.851,5.148"></path></svg></span>
    
    <span class="uk-text-middle">Apply Now!</span>

    

</a>


        
    
    
</div>
<div class="uk-margin-remove-vertical uk-text-center uk-scrollspy-inview uk-animation-fade" data-id="template-rWLyq4-M#0-1-1-5" uk-scrollspy-class="" style="">More Details Below</div><div data-id="template-rWLyq4-M#0-1-1-6" class="detailsbutton uk-margin-remove-vertical uk-text-center uk-scrollspy-inview uk-animation-scale-up" uk-scrollspy-class="uk-animation-scale-up" style=""><a class="uk-icon-link uk-icon" uk-icon="icon: chevron-down; width: 40;" href="#details" uk-scroll=""><svg width="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-down"><polyline fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg></a></div>
            
        
    
</div>
</div>

r

test site: http://www.j2studio.com/grg3910/properties-for-rent/6121-louisiana-ave-new-port-richey-fl-34653

Answer 2

This indicates that the querySelector didn't find an element matching h4.status and returned null. The next line then attempts to access textContent on null and fails.

If your script is in the <head> of the document it will execute before the rest of your document loads, which would account for the scenario described above: When the querySelector runs, the <h4> isn't in the document yet.

You could fix this by moving your script to the end of the body or by listening for a DOMContentLoaded event before executing.