How can I create multi-language popup messages in SweetAlert2?

Question

Explanation of my code:
- pressing "test" button : you can make five circles show up or disappear.
- pressing "English" button : contents are changed to English (except for contents in SweetAlert2 popup messages).
- pressing "Korean" button : contents are changed to Korean (except for contents in SweetAlert2 popup messages).

Inspired by Adam Azad's answer in this post, I started working on creating a multi-language web app that saves a user's selected language. I can successfully switch back and forth between English and Korean for all contents in my web app except for contents in swal messages in SweetAlert2.

- After setting up, I added class="lang" and key="(a key name that matches a content goes here)" for each content that I would like to translate back and forth.

Because I was able to customized confirmButtonText by changing from Got it! to '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>', I thought I could simply add class="lang" and a key name to create multi-language popup messages in SweetAlert2.

- Changed from 'Thank you!' to '<h2 class="lang" key="thxMsgTitle"></h2>' : nothing shows up.
- Changed form 'Your input has been recorded.' to '<div class="lang" key="thxMsgContent"></div>' : instead of the text, the code shows up in the popup message.
- Changed from <div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div> to '<div class="lang" key="thxMsgConfirmBtnTxt" id="swal2-confirmBtnTxt" style="color:#000000"></div>' : nothing shows up.

Also,
I tried if(lang == 'en-us') and else if(lang == 'ko').
It worked great on page load. But, when I clicked a different "language" button, the language in SweetAlert2 messages were not changed, while contents not in SweetAlert2 messages were changed to a different language.

What I would like to achieve:
- Change all contents to English when the "English" button is clicked including contents in SweetAlert2 messages
- Change all contents to Korean when the "Korean" button is clicked including contents in SweetAlert2 messages

I was going to include my code in this post via code snippet. But, it gave me an error message and my code did not work.

So, please look at this JSfiddle: https://jsfiddle.net/hlim188/15no3zyd/69/.
(I put non-working codes as comments.)

I'd greatly appreciate any insight on solving this issue. Thanks in advance! :-)


Explanation of "vote down":
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
- I took a lot of efforts before & while posting this question...
- Instead of voting down, please give me any advice of solving this problem...

The up-vote privilege comes first because that's what you should focus on: pushing great content to the top. Down-voting should be reserved for extreme cases. It's not meant as a substitute for communication and editing.

Answer 1

When you do your

$(".lang").each(function(index, element) {

The SweetAlert elements will not be loaded onto the page yet... You should either call this again straight after the SweetAlert call, or add some kind of event listener that does this when elements are added dynamically.

Alternatively you could just pull the correct value out of the array as you create your SWAL;

confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']

Answer 2

Inspired by Milney's answer in this post & Adam Azad's answer in here, I was able to create a multilingual website.

STEP 1 : Pulling the correct value out of the array as I created SweetAlert2 messages. (e.g., confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt'])

STEP 2 : Because that didn't automatically update contents in SweetAlert2 messages when "English" or "Korean" button was clicked, I forced a webpage to refresh when "English" or "Korean" button was clicked by adding value="Refresh Page" onClick="window.location.reload()".

I wanted to include code by using code snippet. But, an error message showed up, although I copied & pasted code from JSFiddle. Please check a working example here : https://jsfiddle.net/hlim188/15no3zyd/80/.

If you would like to know detailed information of how I created it, please read this blog post :)