<script src="js/script.js"></script>
    <script id="language" src="js/french.js"></script>

    <script>
        let x = document.getElementById("language");
        // Inside french.js there is a console.log("French") and I get that in the console
        console.log(x.src); // "js/french.js"
        if (navigator.language === "en-GB") {
            x.src = "js/english.js";
        };
        console.log(navigator.language); // "en-GB"
        console.log(x.src); // "js/english.js"
        // Inside english.js there is a console.log("English") and I DO NOT get that in the console
        //  ... so what am I doing wrong? 😞
        // Thank you in advance for your help.
    </script>

</body>

 

Edited March 20, 20206 yr by silly.questions

// Wait!

// It works if I do this...

<script id="language"></script>

// And then keep on going like before...

<script>
let x = document.getElementById("language");
  
// But.. WHY?
  
// Thanks again for your help, advice and ANY input or comments as I am learning!

 

What exactly are you trying to do? This seems like a bizarre way to do things.

Thank you for the reply @Jack. I am still learning so please tell me why it is bizarre. For a one page site I want to have different languages.

There are many ways to do this.  If it were me I'd have a different url path part for a different language.  e.g. English would include `/uk` and German would include `/de` then you can serve up different pages depending on the language.

It could still work like a SPA and modules can be shared by them but looking at your post I think you really need to spend some time learning how a SPA actually works.  There's lots to learn about building a JavaScript SPA.
Look at 
React - Create React App is the easiest place to get started with this.  You'll need to learn a little about NPM and JavaScript packages in general etc.

It depends if it's a single page because you only have a single HTML page, or whether it's a single page application (SPA) like Rob is referring to. For a single HTML page I would just duplicate it for every language you need, there's no need to over complicate anything at this stage.

@rbrtsmith and @Jack thank you for your replies and help so far.

No it is a very basic website, one page - HTML, CSS and vanilla JS. The one million dollar question I guess is, with just these tools is there any reliable way of knowing what language the user has as their first language in the browser / computer and based on that, change what is displayed with DOM manipulation?

I wish you a great weekend!

21 minutes ago, silly.questions said:

@rbrtsmith and @Jack thank you for your replies and help so far.

No it is a very basic website, one page - HTML, CSS and vanilla JS. The one million dollar question I guess is, with just these tools is there any reliable way of knowing what language the user has as their first language in the browser / computer and based on that, change what is displayed with DOM manipulation?

I wish you a great weekend!

Nope, your best bet is to ask the user to specify a language and link to a dedicated page or sub site.

Then why are there variables like navigator.language? Once these are known by the browser is it that it is too late because the page is already loaded? Thank you for your help!

Any kind of automated detection is typically error prone. When you start getting into things like IP and language detection you should always have a fallback.

When I enter navigator.language I get en-US, which isn't technically true even though I'm English speaking. You could probably use it for some base level detection, but I would always have a flag or language switcher just in case it's not correct. For a simple site I wouldn't bother with any detection. I would default to English and have a visible language switcher.

After a few months you can take a look at your analytics to see if this needs amending based on where people are visiting, how often, and what the bounce rate is for certain countries. It might be that it makes sense to try and detect location, or it could be that it wouldn't make much difference because you rarely get visits outside of the UK anyway.

10 hours ago, Jack said:

You could probably use it for some base level detection, but I would always have a flag or language switcher just in case it's not correct. For a simple site I wouldn't bother with any detection. I would default to English and have a visible language switcher.

No no it was always my intention to have a visible switcher between languages.

10 hours ago, Jack said:

It might be that it makes sense to try and detect location, or it could be that it wouldn't make much difference because you rarely get visits outside of the UK anyway.

I get a direct 50 / 50 split between UK and DE.

So... what is the best detection to use, while yes defaulting to EN and having a visible menu to switch languages?

Create two sites. One for each language. That way you can ensure the nuances of each language are properly translated.

I’ve been working with a Swiss client for a while now and they have a language switcher. The translations are dire. So bad that they now have set up independent sites.

You saw the site I mean in private message, @fisicx. I am not ready to share it here as I need to improve it a lot! It is just a personal project, seeing how far I can go with vanilla JS. I will make EN default with language switcher.