JavaScript Help with Javascript code on a if else condition

[PedroMag]

I have a wordpress page where I'm using a code snippet to introduce a condition to change the subtitle of a specific profile element that is being showed on the page.The theme I'm using uses the CMSMaster content composer where they have a profiles area where you can add profiles with descriptions and subtitles.On the profile elements where i want to change the subtitle I've added specific class names (escolaprofiles, somaprofiles, corpoprofiles).
The code reads the first class (escolaprofiles) and changes the subtitle of the element but it doesn't go to the next condition to see for the second class name (somaprofiles).


this is the code i have so far:

document.addEventListener('DOMContentLoaded', function() {

    const profile9572 = document.getElementById('post-9572');
    
    if (profile9572) {
        const subtitle = profile9572.querySelector('.pl_subtitle');
        const section = profile9572.closest('.cmsmasters_profile');
        console.log(section); // Add this line to check the value of 'section'
        console.log('Class list', section.classList);
        if (section.classList.contains('escolaprofiles')) {
            subtitle.textContent = 'Contemporâneo e Dança Inclusiva';
        } else if (section.classList.contains('somaprofiles')) {
            subtitle.textContent = 'Dança Inclusiva';
        } else if (section.classList.contains('corpoprofiles')) {
            subtitle.textContent = 'Direção Artística';
        }
    }
});

so this code is working until it stops after the first IF. It changes the subtitle of the profile 'post-9572' on the element that as the class 'escolaprofiles' but then it doesn't go to the next condition to check for the second class name that is 'somaprofiles'.
The console logs were there to check if it was reading the class names.
I don't have any typos on the classes names.

URL to see the issue:
Page

Probably this is an easy answer but my level of coding skills still doesn't allow me to see where I'm making the mistake.

 

[EkBass]

When the code runs, it checks the first if statement, section.classList.contains('escolaprofiles'), and since its true, the code inside the if block is executed, and the subtitle is changed to 'Contemporâneo e Dança Inclusiva'.

Code does not continue to else if because the first if statement has already been true.

Study querySelectorAll to see how to work with multiple elements this way.

 

[PedroMag]

@EkBass Thanks for pointing me the right direction to solve this issue.

So my full code to change the subtitles of a certain profile is the following:

document.addEventListener('DOMContentLoaded', function() {

    const profile9572 = document.getElementById('post-9572');//get profile for Rute

    if (profile9572) {
        const equipaDiv = document.getElementById('equipa');//get the Div with the ID name Equipa
        const subtitles = equipaDiv.querySelectorAll('.pl_subtitle');//get a NodeList of all the class name .pl_subtitle

        subtitles.forEach(subtitle => {
            const article = subtitle.closest('article');//get all the profiles <articles>

            // Check if the article's id matches that of profile9572
            if (article && article.id === profile9572.id) {
                const section = article.closest('.escolaprofiles, .somaprofiles, .corpoprofiles');//get the sections where it existe the custom class names

                if (section) {
                    if (section.classList.contains('escolaprofiles')) {
                        subtitle.textContent = 'Contemporâneo e Dança Inclusiva';
                    } else if (section.classList.contains('somaprofiles')) {
                        subtitle.textContent = 'Dança Inclusiva';
                    } else if (section.classList.contains('corpoprofiles')) {
                        subtitle.textContent = 'Direção Artística';
                    }
                }
            }
        });
    }
});

SOLVED 🙂