How to take the actual written value in html js

Question

I am using the following library to implement multilingualism in my test website. However, there are some shortcomings that are difficult to deal with with my little experience.

The script works in such a way that we have a default language, it is written directly to html and dictionaries are made for other languages(they are at the very end of the js code). Everything works fine except for the title. When we want to switch to the default language, the title does not change, only after reloading the page it changes.

Most likely, the matter is in the following piece of code(184-186 line):

if (langDict["Title"] != null) {
  document.title = langDict["Title"];
}

I suppose we need to add else and somehow set for it a value that is written in the html itself, but not which js changed in the translation.

var languative;
(function (languative) {
    var phraseIdAttr = "data-phrase-id";

    languative.ignoreTags = {
        img: "<img />",
        br: "<br />",
        hr: "<hr />"
    };

    languative.dictonaries = {
        html: {
            _id: "html",
            _name: "HTML"
        },
        en: {
            _id: "en",
            _name: "English"
        },
        ru: {
            _id: "ru",
            _name: "Русский - Russian"
        },
        de: {
            _id: "de",
            _name: "Deutsche - German"
        }
    };

    languative.selectedDictionary = null;

    function getDictionary(langKey) {
        langKey = langKey.toLowerCase();
        if (langKey in languative.dictonaries)
            return languative.dictonaries[langKey];

        var sep = langKey.indexOf("-");
        if (sep > 0)
            langKey = langKey.substring(0, sep);
        return languative.dictonaries[langKey];
    }
    languative.getDictionary = getDictionary;

    function getPhrase(phraseId) {
        var res = findPhrase(phraseId);
        if (res)
            return res; else
            return phraseId;
    }
    languative.getPhrase = getPhrase;

    function findPhrase(phraseId) {
        if ((phraseId == null) || (phraseId == ""))
            return null;

        if ((languative.selectedDictionary != null) && (phraseId in languative.selectedDictionary))
            return languative.selectedDictionary[phraseId];
        if (phraseId in languative.dictonaries.html)
            return languative.dictonaries.html[phraseId];

        return null;
    }
    languative.findPhrase = findPhrase;

    function getYesNo(value) {
        if (value === undefined)
            return getPhrase("undefined"); else if (value)
            return getPhrase("yes"); else
            return getPhrase("no");
    }
    languative.getYesNo = getYesNo;

    function getAttr(node, attr) {
        var result = (node.getAttribute && node.getAttribute(attr)) || null;
        if (!result && node.attributes) {
            for (var i = 0; i < node.attributes.length; i++) {
                var attrNode = node.attributes[i];
                if (attrNode.nodeName === attr)
                    return attrNode.nodeValue;
            }
        }
        return result;
    }

    function getDictionaryFromHtml() {
        function getNodeValue(node) {
            var res = null;
            if ("innerHTML" in node) {
                res = node["innerHTML"];
            } else {
                res = node.nodeValue;
            }
            if (res != null) {
                res = res.replace(/\s{2,}/g, ' ');
                res = res.replace(/^\s+|\s+$/g, '');
            }
            return res;
        }

        function getTagPhrase(tag) {
            if (tag.childNodes.length > 1) {
                var resPhrase = new Array();
                for (var ci = 0; ci < tag.childNodes.length; ci++) {
                    var chNode = tag.childNodes[ci];
                    var chName = chNode.nodeName.toLowerCase();
                    var chValue = null;

                    if (chName in languative.ignoreTags)
                        chValue = languative.ignoreTags[chName]; else
                        chValue = getNodeValue(chNode);

                    resPhrase.push(chValue);
                }
                return resPhrase;
            } else {
                return getNodeValue(tag);
            }
        }

        var tags = getHtmlTags();

        var resDict = new Object();
        for (var ti = 0; ti < tags.length; ti++) {
            var tag = tags[ti];
            var phraseId = getAttr(tag, phraseIdAttr);
            if ((phraseId != null)) {
                var phraseValue = getTagPhrase(tag);
                if ((phraseId in resDict) && (resDict[phraseId] != phraseValue)) {
                    console.warn("Different phrases with the same data-phrase-id='" + phraseId + "'\n" + " 1: " + JSON.stringify(resDict[phraseId], null, "  ") + "\n 2: " + JSON.stringify(phraseValue, null, "  "));
                } else {
                    resDict[phraseId] = phraseValue;
                }
            }
        }
        return resDict;
    }
    languative.getDictionaryFromHtml = getDictionaryFromHtml;

    function changeLanguage(langKey) {
        function setTagPhrase(tag, phrase) {
            if (tag.childNodes.length > 1) {
                for (var ci = 0; ci < tag.childNodes.length; ci++) {
                    var chNode = tag.childNodes[ci];
                    var nName = chNode.nodeName.toLowerCase();
                    if (!(nName in languative.ignoreTags)) {
                        if ("innerHTML" in chNode) {
                            chNode["innerHTML"] = " " + phrase[ci] + " ";
                        } else {
                            chNode.nodeValue = " " + phrase[ci] + " ";
                        }
                    }
                }
            } else {
                tag.innerHTML = " " + phrase + " ";
            }
        }


        var langDict = languative.getDictionary(langKey);
        if (langDict == null) {
            console.warn("Cannot identify dictionary by key '" + langKey + "'. Default dictionary (" + languative.dictonaries.html._id + ": " + languative.dictonaries.html._name + ") used instead.");
            langDict = languative.dictonaries.html;
        }
        languative.selectedDictionary = langDict;

        var tags = getHtmlTags();
        for (var ti = 0; ti < tags.length; ti++) {
            var tag = tags[ti];
            var phraseId = getAttr(tag, phraseIdAttr);
            if ((phraseId != null)) {
                var phraseValue = languative.getPhrase(phraseId);
                if (phraseValue) {
                    setTagPhrase(tag, phraseValue);
                } else {
                    console.warn("Phrase not definied in dictionary: data-phrase-id='" + phraseId + "'");
                }
            }
        }

        if (langDict["Title"] != null) {
            document.title = langDict["Title"];
        }
    }
    languative.changeLanguage = changeLanguage;

    function getHtmlTags() {
        var res = new Array();
        var docTags = document.body.getElementsByTagName("*");

        for (var i = 0; i < docTags.length; i++) {
            var docTag = docTags[i];
            var phraseId = getAttr(docTag, phraseIdAttr);
            if (phraseId)
                res.push(docTag);
        }
        return res;
    }

    var initialized = false;

    function init() {
        if (!initialized) {
            initialized = true;
            var htmlDict = languative.getDictionaryFromHtml();

            for (var dictKey in htmlDict) {
                if (!(dictKey in languative.dictonaries.html)) {
                    languative.dictonaries.html[dictKey] = htmlDict[dictKey];
                }
            }
            var nav = window.navigator;
            languative.changeLanguage(nav.userLanguage || nav.language);
        }
    }
    languative.init = init;

    function modifyDictionary(langKey, dictModifications) {
        var langDict = languative.getDictionary(langKey);
        if (langDict == null) {
            languative.dictonaries[langKey.toLowerCase()] = dictModifications;
        } else {
            for (var dictKey in dictModifications) {
                langDict[dictKey] = dictModifications[dictKey];
            }
        }
    }
    languative.modifyDictionary = modifyDictionary;
})(languative || (languative = {}));

if (document.addEventListener)
    document.addEventListener('DOMContentLoaded', languative.init);

if (window.addEventListener) {
    window.addEventListener('load', languative.init, false);
} else {
    window.attachEvent('onload', languative.init);
}

languative.modifyDictionary("ru", {
            Title: "Заголовок",
            firstmessage: "ЭТО ЯЗЫК ПО УМОЛЧАНИЮ",
            secondmessage: "КАКОЙ ТО ДРУГОЙ ТЕКСТ",
            thirdmessage: "ЧТО ТО ЕЩЕ"
        });
        languative.modifyDictionary("de", {
            Title: "Überschrift",
            firstmessage: "Dies ist die Standardsprache",
            secondmessage: "JEDER ANDERE TEXT",
            thirdmessage: "ETWAS ANDERES"
        });

<ul>
        <li><a href="#" onclick="languative.changeLanguage('en');" data-phrase-id="english">English</a></li>
        <li><a href="#" onclick="languative.changeLanguage('ru')" data-phrase-id="russian">Russian</a></li>
        <li><a href="#" onclick="languative.changeLanguage('de')" data-phrase-id="german">German</a></li>
    </ul>
<h1 data-phrase-id="firstmessage">THIS IS THE DEFAULT LANGUAGE</h1>
<span data-phrase-id="secondmessage">ANY OTHER TEXT</span>
<p data-phrase-id="thirdmessage">SOMETHING ELSE</p>

Also on my website there is a feedback form. I would like it to be possible to translate the placeholder values. How to do it?

I got it like this, but is this a good way?

if ((localStorage.getItem("lang") == "de") || (window.navigator.userLanguage == "de") || (window.navigator.language) == "de") {
    document.querySelector("input[name=name]").placeholder = "Name";
    document.querySelector("input[name=subject]").placeholder = "Thema";
    document.querySelector("input[name=message]").placeholder = "Brief";
} else if ((localStorage.getItem("lang") == "ru") || (window.navigator.userLanguage == "ru") || (window.navigator.language) == "ru") {
    document.querySelector("input[name=name]").placeholder = "Имя";
    document.querySelector("input[name=subject]").placeholder = "Тема";
    document.querySelector("input[name=message]").placeholder = "Сообщение";
} else {
    document.querySelector("input[name=name]").placeholder = "Name";
    document.querySelector("input[name=subject]").placeholder = "Subject";
    document.querySelector("input[name=message]").placeholder = "Message";
};
document.querySelector('.lang').onclick = function() {
    if ((localStorage.getItem("lang") == "de") || (window.navigator.userLanguage == "de") || (window.navigator.language) == "de") {
        document.querySelector("input[name=name]").placeholder = "Name";
        document.querySelector("input[name=subject]").placeholder = "Thema";
        document.querySelector("input[name=message]").placeholder = "Brief";
    } else if ((localStorage.getItem("lang") == "ru") || (window.navigator.userLanguage == "ru") || (window.navigator.language) == "ru") {
        document.querySelector("input[name=name]").placeholder = "Имя";
        document.querySelector("input[name=subject]").placeholder = "Тема";
        document.querySelector("input[name=message]").placeholder = "Сообщение";
    } else {
        document.querySelector("input[name=name]").placeholder = "Name";
        document.querySelector("input[name=subject]").placeholder = "Subject";
        document.querySelector("input[name=message]").placeholder = "Message";
    };
};

var languative;
(function (languative) {
    var phraseIdAttr = "data-phrase-id";

    languative.ignoreTags = {
        img: "<img />",
        br: "<br />",
        hr: "<hr />"
    };

    languative.dictonaries = {
        html: {
            _id: "html",
            _name: "HTML"
        },
        en: {
            _id: "en",
            _name: "English"
        },
        ru: {
            _id: "ru",
            _name: "Русский - Russian"
        },
        de: {
            _id: "de",
            _name: "Deutsche - German"
        }
    };

    languative.selectedDictionary = null;

    function getDictionary(langKey) {
        langKey = langKey.toLowerCase();
        if (langKey in languative.dictonaries)
            return languative.dictonaries[langKey];

        var sep = langKey.indexOf("-");
        if (sep > 0)
            langKey = langKey.substring(0, sep);
        return languative.dictonaries[langKey];
    }
    languative.getDictionary = getDictionary;

    function getPhrase(phraseId) {
        var res = findPhrase(phraseId);
        if (res)
            return res; else
            return phraseId;
    }
    languative.getPhrase = getPhrase;

    function findPhrase(phraseId) {
        if ((phraseId == null) || (phraseId == ""))
            return null;

        if ((languative.selectedDictionary != null) && (phraseId in languative.selectedDictionary))
            return languative.selectedDictionary[phraseId];
        if (phraseId in languative.dictonaries.html)
            return languative.dictonaries.html[phraseId];

        return null;
    }
    languative.findPhrase = findPhrase;

    function getYesNo(value) {
        if (value === undefined)
            return getPhrase("undefined"); else if (value)
            return getPhrase("yes"); else
            return getPhrase("no");
    }
    languative.getYesNo = getYesNo;

    function getAttr(node, attr) {
        var result = (node.getAttribute && node.getAttribute(attr)) || null;
        if (!result && node.attributes) {
            for (var i = 0; i < node.attributes.length; i++) {
                var attrNode = node.attributes[i];
                if (attrNode.nodeName === attr)
                    return attrNode.nodeValue;
            }
        }
        return result;
    }

    function getDictionaryFromHtml() {
        function getNodeValue(node) {
            var res = null;
            if ("innerHTML" in node) {
                res = node["innerHTML"];
            } else {
                res = node.nodeValue;
            }
            if (res != null) {
                res = res.replace(/\s{2,}/g, ' ');
                res = res.replace(/^\s+|\s+$/g, '');
            }
            return res;
        }

        function getTagPhrase(tag) {
            if (tag.childNodes.length > 1) {
                var resPhrase = new Array();
                for (var ci = 0; ci < tag.childNodes.length; ci++) {
                    var chNode = tag.childNodes[ci];
                    var chName = chNode.nodeName.toLowerCase();
                    var chValue = null;

                    if (chName in languative.ignoreTags)
                        chValue = languative.ignoreTags[chName]; else
                        chValue = getNodeValue(chNode);

                    resPhrase.push(chValue);
                }
                return resPhrase;
            } else {
                return getNodeValue(tag);
            }
        }

        var tags = getHtmlTags();

        var resDict = new Object();
        for (var ti = 0; ti < tags.length; ti++) {
            var tag = tags[ti];
            var phraseId = getAttr(tag, phraseIdAttr);
            if ((phraseId != null)) {
                var phraseValue = getTagPhrase(tag);
                if ((phraseId in resDict) && (resDict[phraseId] != phraseValue)) {
                    console.warn("Different phrases with the same data-phrase-id='" + phraseId + "'\n" + " 1: " + JSON.stringify(resDict[phraseId], null, "  ") + "\n 2: " + JSON.stringify(phraseValue, null, "  "));
                } else {
                    resDict[phraseId] = phraseValue;
                }
            }
        }
        return resDict;
    }
    languative.getDictionaryFromHtml = getDictionaryFromHtml;

    function changeLanguage(langKey) {
        function setTagPhrase(tag, phrase) {
            if (tag.childNodes.length > 1) {
                for (var ci = 0; ci < tag.childNodes.length; ci++) {
                    var chNode = tag.childNodes[ci];
                    var nName = chNode.nodeName.toLowerCase();
                    if (!(nName in languative.ignoreTags)) {
                        if ("innerHTML" in chNode) {
                            chNode["innerHTML"] = " " + phrase[ci] + " ";
                        } else {
                            chNode.nodeValue = " " + phrase[ci] + " ";
                        }
                    }
                }
            } else {
                tag.innerHTML = " " + phrase + " ";
            }
        }


        var langDict = languative.getDictionary(langKey);
        if (langDict == null) {
            console.warn("Cannot identify dictionary by key '" + langKey + "'. Default dictionary (" + languative.dictonaries.html._id + ": " + languative.dictonaries.html._name + ") used instead.");
            langDict = languative.dictonaries.html;
        }
        languative.selectedDictionary = langDict;

        var tags = getHtmlTags();
        for (var ti = 0; ti < tags.length; ti++) {
            var tag = tags[ti];
            var phraseId = getAttr(tag, phraseIdAttr);
            if ((phraseId != null)) {
                var phraseValue = languative.getPhrase(phraseId);
                if (phraseValue) {
                    setTagPhrase(tag, phraseValue);
                } else {
                    console.warn("Phrase not definied in dictionary: data-phrase-id='" + phraseId + "'");
                }
            }
        }

        if (langDict["Title"] != null) {
            document.title = langDict["Title"];
        }
    }
    languative.changeLanguage = changeLanguage;

    function getHtmlTags() {
        var res = new Array();
        var docTags = document.body.getElementsByTagName("*");

        for (var i = 0; i < docTags.length; i++) {
            var docTag = docTags[i];
            var phraseId = getAttr(docTag, phraseIdAttr);
            if (phraseId)
                res.push(docTag);
        }
        return res;
    }

    var initialized = false;

    function init() {
        if (!initialized) {
            initialized = true;
            var htmlDict = languative.getDictionaryFromHtml();

            for (var dictKey in htmlDict) {
                if (!(dictKey in languative.dictonaries.html)) {
                    languative.dictonaries.html[dictKey] = htmlDict[dictKey];
                }
            }
            var nav = window.navigator;
            languative.changeLanguage(nav.userLanguage || nav.language);
        }
    }
    languative.init = init;

    function modifyDictionary(langKey, dictModifications) {
        var langDict = languative.getDictionary(langKey);
        if (langDict == null) {
            languative.dictonaries[langKey.toLowerCase()] = dictModifications;
        } else {
            for (var dictKey in dictModifications) {
                langDict[dictKey] = dictModifications[dictKey];
            }
        }
    }
    languative.modifyDictionary = modifyDictionary;
})(languative || (languative = {}));

if (document.addEventListener)
    document.addEventListener('DOMContentLoaded', languative.init);

if (window.addEventListener) {
    window.addEventListener('load', languative.init, false);
} else {
    window.attachEvent('onload', languative.init);
}

languative.modifyDictionary("ru", {
            name: "Ваше имя",
            email: "Ваш email",
            send: "Отправить сообщение"
        });
        languative.modifyDictionary("de", {
            name: "Ihr Name",
            email: "Deine E-Mail",
            send: "Nachricht senden"
        });

ul li{
 list-style: none;
}

    <ul>
            <li><a href="#" onclick="languative.changeLanguage('en');" data-phrase-id="english">English</a></li>
            <li><a href="#" onclick="languative.changeLanguage('ru')" data-phrase-id="russian">Russian</a></li>
            <li><a href="#" onclick="languative.changeLanguage('de')" data-phrase-id="german">German</a></li>
        </ul>
        
<form>
<input type="text" name="name" data-phrase-id="name" placeholder="Your name">
<input type="text" name="email" data-phrase-id="email" placeholder="Your email">
<input type="submit" data-phrase-id="send" value="Send message">
</form>

Answer 1

For the first snippet you should just add a dictionary for en containing the Title and it will work, like so:

languative.modifyDictionary("en", {
    Title: "Caption",
});

For the second one, there is more work because your script change innerHTML, which is not suitable for your feedback form since it contains only input elements which doesn't have innerHTML, so the script should be modified accordingly, like so:

var languative;
(function (languative) {
    var phraseIdAttr = "data-phrase-id";

    languative.ignoreTags = {
        img: "<img />",
        br: "<br />",
        hr: "<hr />"
    };

    languative.dictonaries = {
        html: {
            _id: "html",
            _name: "HTML"
        },
        en: {
            _id: "en",
            _name: "English"
        },
        ru: {
            _id: "ru",
            _name: "Русский - Russian"
        },
        de: {
            _id: "de",
            _name: "Deutsche - German"
        }
    };

    languative.selectedDictionary = null;

    function getDictionary(langKey) {
        langKey = langKey.toLowerCase();
        if (langKey in languative.dictonaries)
            return languative.dictonaries[langKey];

        var sep = langKey.indexOf("-");
        if (sep > 0)
            langKey = langKey.substring(0, sep);
        return languative.dictonaries[langKey];
    }
    languative.getDictionary = getDictionary;

    function getPhrase(phraseId) {
        var res = findPhrase(phraseId);
        if (res)
            return res; else
            return phraseId;
    }
    languative.getPhrase = getPhrase;

    function findPhrase(phraseId) {
        if ((phraseId == null) || (phraseId == ""))
            return null;

        if ((languative.selectedDictionary != null) && (phraseId in languative.selectedDictionary))
            return languative.selectedDictionary[phraseId];
        if (phraseId in languative.dictonaries.html)
            return languative.dictonaries.html[phraseId];

        return null;
    }
    languative.findPhrase = findPhrase;

    function getYesNo(value) {
        if (value === undefined)
            return getPhrase("undefined"); else if (value)
            return getPhrase("yes"); else
            return getPhrase("no");
    }
    languative.getYesNo = getYesNo;

    function getAttr(node, attr) {
        var result = (node.getAttribute && node.getAttribute(attr)) || null;
        if (!result && node.attributes) {
            for (var i = 0; i < node.attributes.length; i++) {
                var attrNode = node.attributes[i];
                if (attrNode.nodeName === attr)
                    return attrNode.nodeValue;
            }
        }
        return result;
    }

    function getDictionaryFromHtml() {
        function getNodeValue(node) {
            var res = null;
            if (node.tagName !== 'INPUT') {
              if ("innerHTML" in node) {
                  res = node["innerHTML"];
              } else {
                  res = node.nodeValue;
              }
            } else {
              res = node.getAttribute("placeholder") || node.value;
            }
            if (res != null) {
                res = res.replace(/\s{2,}/g, ' ');
                res = res.replace(/^\s+|\s+$/g, '');
            }
            return res;
        }

        function getTagPhrase(tag) {
            if (tag.childNodes.length > 1) {
                var resPhrase = new Array();
                for (var ci = 0; ci < tag.childNodes.length; ci++) {
                    var chNode = tag.childNodes[ci];
                    var chName = chNode.nodeName.toLowerCase();
                    var chValue = null;

                    if (chName in languative.ignoreTags)
                        chValue = languative.ignoreTags[chName]; else
                        chValue = getNodeValue(chNode);

                    resPhrase.push(chValue);
                }
                return resPhrase;
            } else {
                return getNodeValue(tag);
            }
        }

        var tags = getHtmlTags();

        var resDict = new Object();
        for (var ti = 0; ti < tags.length; ti++) {
            var tag = tags[ti];
            var phraseId = getAttr(tag, phraseIdAttr);
            if ((phraseId != null)) {
                var phraseValue = getTagPhrase(tag);
                if ((phraseId in resDict) && (resDict[phraseId] != phraseValue)) {
                    console.warn("Different phrases with the same data-phrase-id='" + phraseId + "'\n" + " 1: " + JSON.stringify(resDict[phraseId], null, "  ") + "\n 2: " + JSON.stringify(phraseValue, null, "  "));
                } else {
                    resDict[phraseId] = phraseValue;
                }
            }
        }
        return resDict;
    }
    languative.getDictionaryFromHtml = getDictionaryFromHtml;

    function changeLanguage(langKey) {
        function setTagPhrase(tag, phrase) {
            if (tag.childNodes.length > 1) {
                for (var ci = 0; ci < tag.childNodes.length; ci++) {
                    var chNode = tag.childNodes[ci];
                    var nName = chNode.nodeName.toLowerCase();
                    if (!(nName in languative.ignoreTags)) {
                    console.log(chNode.tagName)
                        if (chNode.tagType !== 'INPUT') {
                          if ("innerHTML" in chNode) {
                              chNode["innerHTML"] = " " + phrase[ci] + " ";
                          } else {
                              chNode.nodeValue = " " + phrase[ci] + " ";
                          }
                        } else {
                          chNode.hasAttribute("placeholder")
                            ? chNode.setAttribute("placeholder", phrase[ci])
                            : chNode.value = phrase[ci];
                        }
                    }
                }
            } else {
                if (tag.tagName !== 'INPUT') {
                  tag.innerHTML = " " + phrase + " ";
                } else {
                tag.hasAttribute("placeholder")
                  ? tag.setAttribute("placeholder", phrase)
                  : tag.value = phrase;
                }
            }
        }


        var langDict = languative.getDictionary(langKey);
        if (langDict == null) {
            console.warn("Cannot identify dictionary by key '" + langKey + "'. Default dictionary (" + languative.dictonaries.html._id + ": " + languative.dictonaries.html._name + ") used instead.");
            langDict = languative.dictonaries.html;
        }
        languative.selectedDictionary = langDict;

        var tags = getHtmlTags();
        for (var ti = 0; ti < tags.length; ti++) {
            var tag = tags[ti];
            var phraseId = getAttr(tag, phraseIdAttr);
            if ((phraseId != null)) {
                var phraseValue = languative.getPhrase(phraseId);
                if (phraseValue) {
                    setTagPhrase(tag, phraseValue);
                } else {
                    console.warn("Phrase not definied in dictionary: data-phrase-id='" + phraseId + "'");
                }
            }
        }

        if (langDict["Title"] != null) {
            document.title = langDict["Title"];
        }
    }
    languative.changeLanguage = changeLanguage;

    function getHtmlTags() {
        var res = new Array();
        var docTags = document.body.getElementsByTagName("*");

        for (var i = 0; i < docTags.length; i++) {
            var docTag = docTags[i];
            var phraseId = getAttr(docTag, phraseIdAttr);
            if (phraseId)
                res.push(docTag);
        }
        return res;
    }

    var initialized = false;

    function init() {
        if (!initialized) {
            initialized = true;
            var htmlDict = languative.getDictionaryFromHtml();

            for (var dictKey in htmlDict) {
                if (!(dictKey in languative.dictonaries.html)) {
                    languative.dictonaries.html[dictKey] = htmlDict[dictKey];
                }
            }
            var nav = window.navigator;
            languative.changeLanguage(nav.userLanguage || nav.language);
        }
    }
    languative.init = init;

    function modifyDictionary(langKey, dictModifications) {
        var langDict = languative.getDictionary(langKey);
        if (langDict == null) {
            languative.dictonaries[langKey.toLowerCase()] = dictModifications;
        } else {
            for (var dictKey in dictModifications) {
                langDict[dictKey] = dictModifications[dictKey];
            }
        }
    }
    languative.modifyDictionary = modifyDictionary;
})(languative || (languative = {}));

if (document.addEventListener)
    document.addEventListener('DOMContentLoaded', languative.init);

if (window.addEventListener) {
    window.addEventListener('load', languative.init, false);
} else {
    window.attachEvent('onload', languative.init);
}

languative.modifyDictionary("ru", {
            name: "Ваше имя",
            email: "Ваш email",
            send: "Отправить сообщение"
        });
        languative.modifyDictionary("de", {
            name: "Ihr Name",
            email: "Deine E-Mail",
            send: "Nachricht senden"
        });

ul li{
 list-style: none;
}

<ul>
            <li><a href="#" onclick="languative.changeLanguage('en');" data-phrase-id="english">English</a></li>
            <li><a href="#" onclick="languative.changeLanguage('ru')" data-phrase-id="russian">Russian</a></li>
            <li><a href="#" onclick="languative.changeLanguage('de')" data-phrase-id="german">German</a></li>
        </ul>
        
<form>
<input type="text" name="name" data-phrase-id="name" placeholder="Your name">
<input type="text" name="email" data-phrase-id="email" placeholder="Your email">
<input type="submit" data-phrase-id="send" value="Send message">
</form>