Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
nekonote404

innerHTML.replace

Question

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.

 

 

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 1

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.

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 1

Try using the following:

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

 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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");
}

 

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...