I'm using JS for adapting text in multiple languages, basing on visitors' language. It there any way to shorten this, by combining the code? That's always following the same pattern, so I guess there's a way (I'm newbie)
<script>
var el = document.getElementById('mainphrase');
{ if (italian || french || german)
{ el.innerHTML = (
(italian && '<strong><em>Buongiorno</em></strong>') ||
(french && '<strong><em>Bonjour</em></strong>') ||
(german && '<strong><em>Guten Morgen</em></strong>') ); }
else { el.innerHTML = '<strong><em>Good morning</em></strong>';}
}
</script>
<script>
var el = document.getElementById('registerphrase');
{ if (italian || french || german)
{ el.innerHTML = (
(italian && '<strong><em>clicca qui</em></strong>') ||
(french && '<strong><em>clicquer ici
(german && '<strong><em>hier clicken
else { el.innerHTML = '<strong><em>click here</em></strong>';}
}
</script>
<script>
var el = document.getElementById('textphrase');
{ if (italian || french || german)
{ el.innerHTML = (
(italian && '<strong><em>Ciao a tutti</em></strong>') ||
(french && '<strong><em>Salut a tous</em></strong>') ||
(german && '<strong><em>Guten Tag</em></strong>') ); }
else { el.innerHTML = '<strong><em>Hello World</em></strong>';}
}
</script>
<script>
let language = {italian:'Buongiorno',german:'Guten Morgen',french:'Bonjour'}
let language1 = {italian:'clicca qui',german:'hier clicken',french:'clicquer ici'}
function htmlById(elementId,languageText){
var el = document.getElementById(elementId);
if (italian || french || german)
{ el.innerHTML = (
(italian && '<strong><em>'+languageText.italian+'</em></strong>') ||
(french && '<strong><em>'+languageText.french+'</em></strong>') ||
(german && '<strong><em>'+languageText.german+'</em></strong>') ); }
else { el.innerHTML = '<strong><em>Good morning</em></strong>';}
}
htmlById('mainphrase',language)
htmlById('registerphrase',language1)
</script>
using function you can group common functionality without rewriting logic again and again.
<script>
// assuming your variables 'italian', 'french', 'german' already are declared and have values
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 = `<strong><em>${phrase}</em></strong>`;
};
modifyElHTML('mainphrase', {
italian: 'Buongiorno',
french: 'Bonjour',
german: 'Guten Morgen',
english: 'Good morning'
});
modifyElHTML('registerphrase', {
italian: 'clicca qui',
french: 'clicquer ici',
german: 'hier clicken',
english: 'click here'
});
modifyElHTML('textphrase', {
italian: 'Ciao a tutti',
french: 'Salut a tous',
german: 'Guten Tag',
english: 'Hello World'
});
</script>
You can further shorten this by combining all the 3 calls into 1 call, and all the phrases and id's together, but that might make it a little hard to work with later.