innerHTML.replace

Hi, I'm trying to make a simple translation program using Javascript to replace certain words from French to English/English to French when pressing a button. I'm using innerHTML.replace to do this, and it works fine.

document.body.innerHTML = document.body.innerHTML.replace(/Bonjour/g, "Hello");

However, in the Product detail page, the Add to Cart button stops working after running the code. The same code runs at the page load, and it's fine. It has no affect on the Add to Cart button. 

window.addEventListener('DOMContentLoaded', function() {
	document.body.innerHTML = document.body.innerHTML.replace(/Bonjour/g, "Hello");
})

This problems occur only when the code is called from a button.

Could anyone help me? Sorry, my client's site is not published yet, so I cannot show you the actual site.

Try using the following:

window.Squarespace.onInitialize(Y, function(){
	document.body.innerHTML = document.body.innerHTML.replace(/Bonjour/g, "Hello");
});

Thanks @colin.irwin

Your code works too for executing the code on page loading. But, the problem that I'm having is when it's called from pressing a button. I don't know why, but it will disable the Add to Cart button. 

Are we allowed to make changes to the template using Javascript?

<ul id="lang-panel">
	<li id="lang-btn-en" class="lang-btn" onclick="switchLang();"> en</li>
</ul>

------------

function switchLang () {
	document.body.innerHTML = document.body.innerHTML.replace(/Bonjour/g, "Hello");
}

Can you provide a link to your site?

Hi @equites.

When you set document.body.innerHTML to be equal to something else (even something only slightly different) , you're effectively replacing the entire contents of the body element, not just the text you're seeking to replace via the .replace() method. In other words, it's a destructive action, destroying the entire document and replacing it with a (slightly modified, in your case) copy of it.

Problem: the elements you're replacing (every single element within the body) may have had event listeners and other functionality "attached" to them. The replacement "copies" are indeed copies, but are also entirely different entities from the original ones. They don't have those actions "attached" like the original elements did.

Therefore, any element that has had functionality added to it before your code runs will quit working, because the element is replaced with a copy that does not have that functionality.

For elements that have their functionality added after your code runs, they will work initially, but will then fail to work if your code runs again (if repeating the translation to yet another language.) The Add to Cart button is an example. I'd be surprised if there aren't many others. This can be referred to as a "race condition" and such conditions often cause a lot of confusing behavior.

Solution: You'll need to take a different approach: identify and target the elements on the page that should have their text replaced. When targeting, ensure you're targeting the inner-most element that contains the text node. While not always necessary, that will ensure you don't destroy existing functionality within the DOM. For each element, replace its innerHTML/text-node, each on an individual basis. This will keep the elements intact, affecting only the text within.

It's a new site and it's not ready for public yet, but here it is.

https://lychee-chiton-g4er.squarespace.com/rings/bague-branche-large

So the site's original language is in French, and my code can convert certain words and phrases into English.

As I set English as default language temporary, my code will run when page is loaded and it will translate the page into English automatically. At this point, the order button still works.

However, if I click on the "fr" link at the top of the page, it will translate back the page to French, but the order button no longer works. The same code is run at page load, and it has no problem. I can't tell the difference.

Thanks for helping me out. I really appreciate it.

Hi @equites - the reason it doesn't work is explained by @brandon earlier in this thread. 

Thanks to @brandon and @colin.irwin, the problem was solved. I apologize for the replay.