Change parent class based on image alt tag

Question

I am trying to add a class to the parent container of images based on their alt tags. I have seen several posts about this but most use jQuery and I am using vanilla.

The page in question is a category layout in Joomla and the images contain either of 3 alt tags. I want to change the parent class if the alt tag is either of two strings and do nothing on the third. The change to the parent element will insert an image overlay like I have done here: single article page

I am brand new to js and have tried all day to no avail. Here is a CodePen of what I have tried (and get errors, naturally): CodePen example

Any help is greatly appreciated.

    let catImages = document.querySelectorAll('.el-image').alt;
    catImages.forEach(catImage){
    function addSnipe(){
        if(catImages === "Rented"){
            catImages.parentNode.classList.add('rental-snipe-rented');
        }
        else if(catImages === "On Hold"){
            catImages.parentNode.classList.add('rental-snipe-hold');
        } else{};
    };
};
    
    addSnipe();

/* rental status styles */
.wrapper {width: 100%;}
.thirds {display: inline-block; width: 33%; 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;}
.rental-features {background: #f7f7f7;}
.status-color-rented {background: red; padding: 2px 4px; color: #fff; font-weight: 700;}
.status-color-hold {background: #ffcc00; padding: 2px 4px; color: #000; font-weight: 700;}

   <div class="wrapper">
        <div class="thirds">
            <a href=#>
                <img class="el-image uk-transition-scale-up uk-transition-opaque" alt="Available" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/Living1-4394aeaf.jpeg">
            </a>
            <h3>Property 1</h3>
        </div>
        <div class="thirds">
            <a href=#>
                <img class="el-image uk-transition-scale-up uk-transition-opaque" alt="On Hold" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/eagleswood-810273b3.jpeg">
            </a>
            <h3>Property 2</h3>
        </div>
        <div class="thirds">
            <a href=#>
                <img class="el-image uk-transition-scale-up uk-transition-opaque" alt="Rented" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/picadilly-e22b9e85.jpeg">
            </a>
            <h3>Property 3</h3>
        </div>

    </div>

Answer 1

You can achieve this with the following vanilla js code :-

let catImages = document.querySelectorAll('.el-image'); /* select all nodes with class .el-image */

for(var i = 0; i < catImages.length; i++){ // run for loop on the selected nodes
        if( catImages[i].alt === "Rented"){ // check the condition for alt tag's value
            catImages[i].parentNode.classList.add('rental-snipe-rented'); // add class to parent 
        }
        else if( catImages[i].alt === "On Hold"){
            catImages[i].parentNode.classList.add('rental-snipe-hold');
        }
        else{
             // do this..
        }
    }

Hope this helps you.