On my elementor (pro) website I use the bandsintown wordpress plugin to show a list of upcoming events. This plugin shows the title, date, location and request a show in English. I’d like for the text to be in Dutch as we are a band situated in the Netherlands.

I use an HTML block in elementor with a tag inside of it to dynamically change the text to dutch after page load. However, after a certain time on mobile it changes back to its original content. On desktop it seems to work fine untill I open or close the debug menu (I use Firefox).

Does someone know why this behaviour occurs?

P.S. There might be an easier or more efficient ways to do the same, in that case, please let me know! My knowledge of Javascript isn’t infinite and I’d love to learn new tricks!

Provided below is the Javascript code as is.

<script type="text/javascript">
    window.onload = function() {
        
        //Header to dutch
        let show_header = document.querySelector(".bit-show-upcoming");
        show_header.innerHTML = "Komende optredens";
        
        //Request show to dutch
        let request_show = document.querySelector(".bit-play-my-city-button");
        request_show.innerHTML = "Vraag een show aan";
        
        //Set variables for date and location respectively
        let date = document.querySelectorAll(".bit-date");
        let location = document.querySelectorAll(".bit-location");
        
        //Loop through all events and update content accordingly
        for (let a = 0; a < date.length; a++) {
            
            //Get and split current date text (english)
            let date_text = date[a].innerHTML;
            let date_split = date_text.split(" ");
            
            //Get and split current location text (english)
            let location_text = location[a].innerHTML;
            let location_split = location_text.split(" ");
            let location_total = "";
            
            //Test for all possible days and update in array
            switch (date_split[0]) {
                case "Mon,":
                    date_split[0] = "Ma,";
                    break;
                case "Tue,":
                    date_split[0] = "Di,";
                    break;
                case "Wed,":
                    date_split[0] = "Wo,";
                    break;
                case "Thu,":
                    date_split[0] = "Do,";
                    break;
                case "Fri,":
                    date_split[0] = "Vr,";
                    break;
                case "Sat,":
                    date_split[0] = "Za,";
                    break;
                case "Sun,":
                    date_split[0] = "Zo,";
                    break;
            }
            
            //Test for months with different abbreviation in english compared to dutch and change it.
            switch (date_split[1]) {
                case "MAY":
                    date_split[1] = "MEI";
                    break;
                case "OCT":
                    date_split[1] = "OKT";
                    break;
            }
            
            //Test for different countries in (english) and change to (dutch) version accordingly
            switch (location_split[location_split.length - 1]) {
                case "Netherlands":
                    location_split[location_split.length - 1] = "Nederland";
                    break;
                case "Germnany":
                    location_split[location_split.length - 1] = "Duitsland";
                    break;
                case "Belgium":
                    location_split[location_split.length - 1] = "België";
                    break;
            }
            
            //Update the date with the translated text
            date[a].innerHTML = date_split[0] + " " + date_split[2] + " " + date_split [1];
            
            //Concatenate location text array
            for (let b = 0; b < location_split.length; b++) {
                
                if (b < location_split.length - 1) {
                    location_total += location_split[b] + " ";
                } else {
                    location_total += location_split[b];   
                }
                
            }
            
            //Update the location with the translated text
            location[a].innerHTML = location_total;
            
        }
        
    }
</script>

I’m thinking of adding a timer (e.g. setTimeout) after window.onload has finished doing it’s thing. However, I feel like that shouldn’t be necessary.

I haven’t tested different browsers for the interesting, to say the least, behaviour of opening and closing the debug menu interfering with the changed text.

I might be able to figure out something by staring at it for a while. But, I’d like to try using the vast knowledge of the StackOverflow users to come to my aid.

If you miss any information or have questions, please let me know and I’ll try to answer/ add it as extensively as possible.

Thanks for your time in advance and hopefully some of you can help me out!