Dynamically changed text returns to its previous state after x time or when opening/ closing debug menu

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). Resizing the browser also breaks it. 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! Link to the website I'm working on: https://coverbandzuko.nl The plugin is used in the 'shows' section of the page, scroll down a bit and you'll bump into it! 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!

Comment (0)

You’ll be in good company