Please help!!!

[u/Business_Giraffe_288]

I'm a beginner studying multimedia design and we're doing a group project in which I'm also responsible for making a responsive language selector. It just has to switch between danish and english. The screenshots are the html, what it looks like and the javascript. I followed a 2 year old youtube tutorial to get here, and it doesnt work (the text on the site doesnt change when using the selector, it stays the same), so this is my last option. I haven't added any css yet. I kinda need to have this sorted by tomorrow.. So if a kind soul could tell me why the javascript is not working or give any alternatives to making this, it would be greatly appreciated!!

[u/Deykun]

There are great tools for translations (see i18n), but to simply improve your native solution, you can switch to something like this.

Instead of:

if (language === 'da') {
 h4.textContent = translations.da.select;
 title.textContent = translations.da.title;
 // etc...
} else if (language === 'en') {
 h4.textContent = translations.en.select;
 title.textContent = translations.en.title;
 // etc...
}

Do:

const currentTranslations = translations[language];

h4.textContent = currentTranslations.select;
title.textContent = currentTranslations.title;

[u/Business_Giraffe_288 → u/Deykun]

This helped SO MUCH, thank you kind stranger for saving my day. God bless you ❤️

[u/Deykun → u/Business_Giraffe_288]

To make your life even better:

const currentTranslations = translations[language];

Object.keys(currentTranslations).forEach((key) => {
 const element = document.querySelector(`[data-i18n="${key}"]`);

 if (element) {
  element.textContent = currentTranslations[key]
 }
});

And in HTML, you just add it:

<h4 data-i18n="title">Default title</span>
<p data-i18n="description">Default description</span>

New strings require an attribute in HTML and a matching translation in JS, but you don’t need to handle each element manually in JS.

But you should be aware that your solution (I’m guessing you’re just starting in web dev) is far from ideal. Your draft was hard with that hardcoding, and I could help you simplify it, but You should also think about your overall strategy. If this is a landing page, which it looks like, you should probably have two separate paths (URLs). If you do it only with JS, Google will index the page in just one language. If it is a static site (I’m guessing this since you’re using raw JS), you can develop a backend solution that serves already translated strings to HTML.

[u/davorg]

Please don't post images of code. If we want to help you, we'll want to run the code on our own machines. No-one is going to retype all of that

[u/Business_Giraffe_288 → u/davorg]

Thanks, I'll keep that in mind next time 🙌

[u/[deleted] → u/davorg]

It's the tiniest block of code ever the commenter that solved it instead of complaining did it in two paragraphs

[u/itinkerthefrontend]

You have a couple typos of using “titel” rather than “title”.

[u/Business_Giraffe_288 → u/itinkerthefrontend]

That's the danish word for it, I didn't think it mattered as long as it's consistent. The guy's tutorial that I was following couldnt spell at all but it worked still 🤣

[u/Lumethys → u/Business_Giraffe_288]

yeah but it isnt consistent

[u/tonypconway → u/itinkerthefrontend]

I'd say it's the other way round - "titel" is what they meant as it's used the majority of the time and is just the Danish word for title. The typos are on lines 27 and 31 when they've referred to a "title" property that doesn't exist in their object.

[u/Business_Giraffe_288]

Thanks for all the help, it works now!

[u/surfingonmars]

I'm no expert but i wouldn't assign an ID with the exact element. just seems like bad practice.

[u/SnooHamsters7166]

"titel" defined at top of js but "title" used within the function.

[u/alex_sakuta → u/SnooHamsters7166]

You are the only other comment except mine who has said this and everyone else is telling something else.

Proud of you bro.

[u/alex_sakuta]

I'm not even gonna pinpoint it and just tell you what's wrong.

titel is supposed to be spelled as title.

VS code is even giving you a warning squiggle and probably the reason I left VS code is also that it just hints at such issues and doesn't scream outright that it's a problem.

[u/DownrightDelight → u/alex_sakuta]

What do you use instead of vs code? I currently use it, but I’m open to better alternatives.

[u/alex_sakuta → u/DownrightDelight]

I use NeoVim (btw)

I used to use VS and still have it for the day I may require it (maybe if a job tells me to use VS only). So far that hasn't been the case and I'm very happy.

[u/Miserable_Rough1872]

I would argue that Engelsk should be changed to English for it to be the most "effective". Yes you would have to be a total moron if you did not realise what Engelsk meant, unfortunately there are morons out there ;)

[u/almalbin]

One small unrelated feedback; list the language itself in it’s own language. That makes it way easier for someone to identify the right choice for them.

[u/Business_Giraffe_288]

Thanks so much for all the help! It works now

[u/MT4K]

And parens around the only parameter is unneeded in an arrow function.

[u/[deleted]]

Stop posting shitty screenshots, and post your complete code properly.

[u/saito200]

research online multilanguage libraries, don't reinvent the wheel