I'm using the following javascript to type portions of code basing on the visitors' browser language.
But I've noticed that the fact that both JS use the same commands (just different conditions) cause a conflict, so only the first listed one will work correctly.
How can I solve this?
<script>
const modifyElHTML = (elID, phrases) => {
const el = document.getElementById(elID);
let phrase;
if (italian) {phrase = phrases.italian; }
else if (french) {phrase = phrases.french; }
else if (german) {phrase = phrases.german; }
else {phrase = phrases.english; }
el.innerHTML = `${phrase}`; };
modifyElHTML('comentario', {italian: 'Scrivi un commento...', french: 'Ajouter un commentaire...', german: 'Kommentieren ...', english: 'Write an answer...',});
</script>
<script>
const modifyElHTML = (elID, phrases) => {
const el = document.getElementById(elID);
let phrase;
if (italian) {phrase = phrases.italian; }
else if (french) {phrase = phrases.french; }
else if (german) {phrase = phrases.german; }
else {phrase = phrases.english; }
el.innerHTML = `<button class="_1gl3 _4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><span>${phrase}</span></button><a href="#" onclick="exit_alert()"></a>`; };
modifyElHTML('showmorecomments', {
italian: 'Carica altri 10 commenti', french: 'Chargez 10 autres avis', german: '10 weitere Kommentare laden', english: 'Load 10 more comments',});
</script>
If you're just worried about conflicting variable names, you can use a closure... or in JS lingo, an IIFE.
(function(){
const modifyElHTML = (elID, phrases) => {
const el = document.getElementById(elID);
let phrase;
if (italian) {phrase = phrases.italian; }
else if (french) {phrase = phrases.french; }
else if (german) {phrase = phrases.german; }
else {phrase = phrases.english; }
el.innerHTML = `${phrase}`; };
modifyElHTML('comentario', {italian: 'Scrivi un commento...', french: 'Ajouter un commentaire...', german: 'Kommentieren ...', english: 'Write an answer...',});
})();
(function(){
const modifyElHTML = (elID, phrases) => {
const el = document.getElementById(elID);
let phrase;
if (italian) {phrase = phrases.italian; }
else if (french) {phrase = phrases.french; }
else if (german) {phrase = phrases.german; }
else {phrase = phrases.english; }
el.innerHTML = `<button class="_1gl3 _4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><span>${phrase}</span></button><a href="#" onclick="exit_alert()"></a>`; };
modifyElHTML('showmorecomments', {
italian: 'Carica altri 10 commenti', french: 'Chargez 10 autres avis', german: '10 weitere Kommentare laden', english: 'Load 10 more comments',});
})();
You can add a parameter to show a button or a text
let lang;
// lang = "italian"; // shorter than italian = true etc
const modifyElHTML = (elID, phrases, button) => {
const el = document.getElementById(elID);
const phrase = phrases[lang||"english"]; // added default language if lang not set
el.innerHTML = button ? `<button class="_1gl3 _4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><span>${phrase}</span></button><a href="#" onclick="exit_alert()"></a>` : `${phrase}`;
};
modifyElHTML('comentario', {
italian: 'Scrivi un commento...',
french: 'Ajouter un commentaire...',
german: 'Kommentieren ...',
english: 'Write an answer...',
});
modifyElHTML('showmorecomments', {
italian: 'Carica altri 10 commenti',
french: 'Chargez 10 autres avis',
german: '10 weitere Kommentare laden',
english: 'Load 10 more comments',
}, true); // button = true<div id="comentario"></div>
<div id="showmorecomments"></div>