How to combine 2 or more JavaScript with the same function-CodePudding

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>

CodePudding user response：

<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.

CodePudding user response：

        <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.