How to unify 2 scripts of the same type, in order not to create conflict?

December 1, 2021

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>

>Solution :

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',});
})();