JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<p>
    <label>Language: </label>
    <select id="language">
        <option value="en">English</option>
        <option value="es">Spanish</option>
    </select>
</p>

<p><span data-translate="text1">The first text</span></p>
<p><span data-translate="text2">The second text</span></p>

JavaScript

document.getElementById("language").selectedIndex = "-1";

var translations = new Object();

translations.en = {
    text1: 'The first text',
    text2: 'The second text'
};

translations.es = {
    text1: 'El primer texto',
    text2: 'El segundo texto'
};

document.getElementById('language').addEventListener('change', function(){    
    var lang = this.value;
    var items = document.querySelectorAll('[data-translate]');
    for (var i = 0; i < items.length; ++i) {
        var index = items[i].getAttribute('data-translate');
        items[i].innerHTML = translations[lang][index];
    }
});