Radio Buttons

by Tessa Watkins

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="en" name="lang-setting" value="en" type="radio" />
<label for="en">English</label>
<input id="de" name="lang-setting" value="de" type="radio" />
<label for="de">German</label>
<input id="fr" name="lang-setting" value="fr" type="radio" />
<label for="fr">French</label>
<div>
<p id="latitude-n">Default Latitude</p>
<p id="longitude-n">Default Longitude</p>
<p id="accuracy-n">Default Accuracy</p>
<p id="words-n">Default Words</p>
<p id="map-n">Default Map</p>
</div>

JavaScript

$(document).ready(function(){
	translate.changeText(translate.default);
});

$('input[name="lang-setting"]').on('click', function(e){
    var lang = $(this).val();
    translate.changeText(lang);
});

var translate = {
		default: 'en',
    en: {
        latitude: 'latitude',
        longitude: 'longitude',
        accuracy: 'accuracy',
        words: 'words',
        map: 'map',
    },
    de: {
        latitude: 'German latitude',
        longitude: 'German longitude',
        accuracy: 'German accuracy',
        words: 'German words',
        map: 'German map',
    },
    fr: {
        latitude: 'French latitude',
        longitude: 'French longitude',
        accuracy: 'French accuracy',
        words: 'French words',
        map: 'French map',
    },
    changeText: function(lang) {
    	$('#latitude-n').html(translate[lang].latitude);
      $('#longitude-n').html(translate[lang].longitude);
      $('#accuracy-n').html(translate[lang].accuracy);
      $('#words-n').html(translate[lang].words);
      $('#map-n').html(translate[lang].map);
    }
}