Simple I18n in pure Javscript

A simple approach to create a multi-language static single page.

by basteyy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Install</title>
</head>
<body>
<h1>Setup</h1>
<p class="fancy">I'm text</p>
<hr />
<select aria-label="Choose the language of the setup" id="languageSelector">
<option selected>Other Language</option>
</select>
</body>
</html>

JavaScript

const languages = {
    "en": {
        "name": "English",
        "translations": {
            "h1": "Setup in englisch (forced to change into something else)"
        }
    },
    "de": {
        "name": "Deutsch",
        "translations": {
            "h1": "Einrichtung in deutsch",
            "p.fancy": "Ich bin Text"
        }
    }
};
const default_language = "en";
const browserLanguage = navigator.language || navigator.userLanguage;
const loadLanguage = (language) => {
    const translations = language.translations;
    
    document.querySelector("html").setAttribute("lang", language.name);

    for(let key in translations) {
        const value = translations[key];
        const elements = document.querySelectorAll(key);

        // Put original value into default
        if(typeof languages[default_language].translations[key] === "undefined") {
            if(elements.length > 1) {
                languages[default_language].translations[key] = [];
                for(let i = 0; i < elements.length; i++) {
                    languages[default_language].translations[key].push(elements[i].innerHTML);
                }
            } else {
                languages[default_language].translations[key] = elements[0].innerHTML;
            }
        }

        for(let i = 0; i < elements.length; i++) {
            const element = elements[i];
            element.innerHTML = value;
        }
    }
}
const languageSelector = document.getElementById("languageSelector");

for(let key in languages) {
    const language = languages[key];
    const option = document.createElement("option");
    option.value = key;
    option.innerHTML = language.name;
    languageSelector.appendChild(option);
}

languageSelector.addEventListener("change", (event) => {
    const language = languages[event.target.value];
    loadLanguage(language);
});

if(languages[browserLanguage]) {
    loadLanguage(languages[browserLanguage]);
} else {
   ...