CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 1839

Changing html language on click

I am new to HTML and I try to figure out how to change the website language once a button is clicked.

For example, I created a website with 2 flags (US, ES) and I had like the whole page to change the language once the flag is clicked.

enter image description here

However, I'm not sure how to do it since it seems to me like all of the text I used is static but I'm not sure how to do it otherwise.

For example, my code looks like this:

<header id="header" class="row">   
    
    <nav id="header-nav-wrap">
        <ul class="header-main-nav">
            <li class="current"><a class="smoothscroll"  href="#home" title="home">Home</a></li>
            <li><a class="smoothscroll"  href="#about" title="about">About</a></li>
            <li><a class="smoothscroll"  href="#download" title="download">Download</a></li>
        </ul>
    </nav>
    
    <img class="esp" href="#esp" src="https://www.countryflags.io/es/shiny/64.png" height="30" width="30" onclick="document.body.className='es'">
    <img class="english" href="#english" src="https://www.countryflags.io/us/shiny/64.png" height="30" width="30" onclick="document.body.className='en'">

    <a class="header-menu-toggle" href="#"><span>Menu</span></a>        
    
</header> <!-- /header -->

Now here the Home/About/Download are static strings from my understanding. How can I change them once clicked?

Thank you

Upvotes: 3

Views: 2439

Answers (4)

ray
ray

Reputation: 27245

If you had no other option for some reason, you could create a copy of the site for each language you want to support, place them under their own subdirectories, and have each flag link to the corresponding language:

site/
  + en-US/
    - index.html
    - about.html
  + fr-FR/
    - index.html
    - about.html

But this is not something you would generally accomplish with HTML alone.

What follows requires quite a bit of additional infrastructure and knowledge; too much to cover thoroughly here, but just to give you a sense of it:

A common approach to this is to use a web templating language to render the page with localized strings pulled from an external datasource.

If your template looks like this:

<a href="home.html">{{home}}</a>
<a href="email.html">{{email}}</a>

And you have locale data like this:

{
  "en-US": {
    "home": "Home",
    "email": "Email"
  },
  "fr-FR": {
    "home": "Domicile",
    "email": "Messagerie électronique"
  },
}

Then you can get a page in a different language by passing the appropriate data to the template:

res.render(template, localeData['en-US']);

If the user changes languages you render with different data:

res.render(template, localeData['fr-FR']);

The question then becomes how do you know what language your visitor wants? And again, there are lots of options available. For example, you could set a cookie to track their language preference. Or you could use a static site generator to pre-render all the pages in all the available languages and use the directory structure linking approach described above. (The latter approach has the benefit of being very easy to deploy, requiring minimal server resources, etc.)

Good luck.

Upvotes: 0

Adeyemo Toluwanimi
Adeyemo Toluwanimi

Reputation: 157

You would require some backend to achieve that. Internalization and localization with Django, learn more here

Upvotes: 0

Tanner Dolby
Tanner Dolby

Reputation: 4421

Handling Internationalization is not a small task. There are many pieces that you need to prepare before you can properly supply language specific page content.

That being said, the lang global attribute defines the language of an element. Adding this step to the work done in your click event would be a good idea. Using Element.setAttribute() you can update the lang attribute on the <body> and update nav link text with Node.textContent every time the locale flags are pressed.

Note: The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value.

There are a few ways you could go about doing this. I see your adding the locale as a class to the <body> inside the inline onclick event, if you wanted to change the nav link text based on the body having a class of "en" or "esp" you could do that. Or you could attach event listeners to each of the <img> elements and then update the nav link text and lang depending on which locale flag is clicked. You will need to swap the current text with a locale specific type on each click event, so I added some demo data to represent the en-US and es content.

Now here the Home/About/Download are static strings from my understanding. How can I change them once clicked?

The text content of each <a> element in your list of nav links is indeed static text, but when a click event is triggered from the <img> flag being pressed, we can dynamically update the textContent for those <a> nodes on the DOM using Node.textContent and reassign its value like Node.textContent = "".

const espFlag = document.querySelector(".esp");
const engFlag = document.querySelector(".english");
const navLinks = document.querySelectorAll(".smoothscroll");
const body = document.querySelector("body");

const espLocaleLinks = ["One", "Two", "Three"];
const engLocaleLinks = ["Home", "About", "Download"];

espFlag.addEventListener("click", () => {
   body.setAttribute("lang", "es");
   body.className = 'es';
   navLinks.forEach((link, index) => link.textContent = espLocaleLinks[index]);
   console.log(body);
});

engFlag.addEventListener("click", () => {
   body.setAttribute("lang", "en-US");
   body.className = 'en';
   navLinks.forEach((link, index) => link.textContent = engLocaleLinks[index]);
   console.log(body);
});
<header id="header" class="row">   
    
    <nav id="header-nav-wrap">
        <ul class="header-main-nav">
            <li class="current"><a class="smoothscroll"  href="#home" title="home">Home</a></li>
            <li><a class="smoothscroll"  href="#about" title="about">About</a></li>
            <li><a class="smoothscroll"  href="#download" title="download">Download</a></li>
        </ul>
    </nav>
    
    <img class="esp" href="#esp" src="https://www.countryflags.io/es/shiny/64.png" height="30" width="30">
    <img class="english" href="#english" src="https://www.countryflags.io/us/shiny/64.png" height="30" width="30">

    <a class="header-menu-toggle" href="#"><span>Menu</span></a>        
    
</header> <!-- /header -->

Upvotes: 1

Felipe Saldanha
Felipe Saldanha

Reputation: 1345

There is no simple way to do this with pure HTML and CSS. It is possible to use JavaScript, but you would still need to request the translated content from some database, JSON file or similar and figure out how to hardcode it in the right places.

It would be better for you to use a content management system (e.g. WordPress) or a static website generator (e.g. Gatsby) to automate these procedures.

Or just use Google Translate to do this automatically for you (be aware of possible translation errors).

Upvotes: 0

Related Questions