CODEWITHSUNDEEP
javascripthtmlcssweblanguage-switching
dubooduboo
dubooduboo

Reputation: 291

Html two language option with button (without having to redirect to different page )

I'm trying to make second language option to the website. Here are the details for the project :

1) I'm not trying to use Google translator system or any other auto translator service to change the entire website language.

2) I only trying to translate the main description part in the website.

3) I already have written and saved translated version of the description text.

4)I also made a dropdown language option button in a separate file but under same template for both language.

So, to make it clear, my question is :

How can I use language option button to switch the language between English and Korean (from English to Korean, and from Korean to English depending on what user select) with the translated description text I have?

----- code below is the dropdown language option button ----------------

    <!DOCTYPE html>
    <html>
    <head>
	    <title></title>

	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>

    <div class="container">            
       <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Language Option
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">English</a></li>
          <li><a href="#">Korean</a></li>
        </ul>
      </div>
    </div>

    </body>
    </html>

Upvotes: 4

Views: 52114

Answers (2)

A. Meshu
A. Meshu

Reputation: 4148

This is how i do it when i build a multi-lingual website. I put notes inside the code for clarification.

<form>
    <label for="lang-switch">
        <span lang="ko">언어</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="ko" selected>한국어</option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트</span>
    <span lang="en">Text in English</span>
</p>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('[lang]').hide(); // hide all lang attributes on start.
$('[lang="ko"]').show(); // show just Korean text (you can change it)
$('#lang-switch').change(function () { // put onchange event when user select option from select
    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'ko':
            $('[lang]').hide();
            $('[lang="ko"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="ko"]').show();
        }
});
</script>

Hope it solve your problem.

(since i don't speak Korean i used google-translate for the example)

Upvotes: 6

Kevin Bai
Kevin Bai

Reputation: 631

Javascript is your best bet. In your <li> tags, you want to add an onclick event listener so that you can change the text of an HTML element when you select a list item. 

<li onclick="toggleLanguage('English')"><a href="#">English</a></li>
<li onclick="toggleLanguage('English')"><a href="#">Korean</a></li>

Here, the onclick attribute calls the function: function toggleLanguage(language).

Next, create a <script> tag after the body to call your javascript code.

<script>
    function toggleDescriptor(language) {
        let description = document.getElementById("description");
        if (language === "Korean") {
            description.innerHTML = "Show Korean Text";
        }
        else {
            description.innerHTML = "Show English Text";
        }  
    }
<script>

This function accesses the element that you want to change the text to. In this case, I created an h1 tag with an id="description".

Here is an example of the all the changes:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
  <h1 id="description">Show English Text</h1>
   <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Language Option
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li onclick="toggleLanguage('English')"><a href="#">English</a></li>
      <li onclick="toggleLanguage('Korean')"><a href="#">Korean</a></li>
    </ul>
  </div>
</div>

</body>
<script>
  function toggleLanguage(language) {
    let description = document.getElementById("description");
    if (language === "Korean") {
      description.innerHTML = "Show Korean Text";
    }
    else {
      description.innerHTML = "Show English Text";
    }
  }
</script>
</html>

Upvotes: 1

Related Questions