Problem of translation

JavaScript
1

Hi,

I have a code to translate a website in french or spanish. I can translate in spanish but I can translate back in french. Thank you if you can help me!!!

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <h1><span id="translationJs">Titre du site</span></h1>
    <p><span id="translationJs">Contenu du site</span></p>

    <select id="languageSelect" onchange="changerLangue()">
        <option value="fr">French</option>
        <option value="es">Español</option>
        <!-- Ajoutez d'autres options pour les langues disponibles -->
    </select>

    <script>
        // Tableau de traductions
        var translations = {
            "Titre du site": {
                "fr": "Titre du site",
                "es": "Título del sitio",
            },
            "Contenu du site": {
                "fr": "Contenu du site",
                "es": "Contenido del sitio",
            },
        };

        // Fonction pour traduire le contenu du site
        function traduire() {
            var lang = document.getElementById("languageSelect").value;
            var elements = document.querySelectorAll("#translationJs");

            elements.forEach(function(element) {
                var key = element.innerHTML;
                var translatedText = translations[key] ? translations[key][lang] : null;

                if (translatedText) {
                    element.innerHTML = translatedText;
                } else if (lang === "fr") {
                    // Si la langue est 'fr' et la traduction n'est pas trouvée,
                    // on applique le texte en français par défaut
                    element.innerHTML = translations[key]["fr"];
                } else {
                    console.log(
                        "Traduction introuvable pour la clé '" +
                        key +
                        "' en langue '" +
                        lang +
                        "'"
                    );
                }
            });
        }

        // Fonction appelée lors du changement de langue
        function changerLangue() {
            traduire();
        }

        // Traduction initiale au chargement de la page
        traduire();
    </script>
</body>

</html>
2

Can you provide some HTML to go with the above code?

Just enough that I can see the traduire function change some text on the page.

1 Like
3

I think he has, but it’s outside of the codeblock? Maybe someone with some magical powers can shift the ```? :wink:

2 Likes
4

Nicely spotted.

1 Like
5

var elements = document.querySelectorAll("#translationJs");

I cant see your HTML, but this is a red flag to me… you’re querySelectorAll’ing an ID. There should only be 1 ID “translationJs”. If this is a class (and it should be), it should be .translationJs

1 Like
6

Second red flag:
var key = element.innerHTML;

If you’ve changed the innerHTML from french (“Contenu du site”) to spanish (“Contenido del sitio”), then when the code runs the second time, key is “Contenido del sitio”… which doesnt exist in your translation matrix. You’ll need a different way of telling the system what key this is. It sounds like a good use for i18n

1 Like
7

A working version. Not quite proper i18n implementation, but it’ll do as a bridge…

1 Like
8

Hi everyone!

Thx a lot for the solution!!
Sorry for the pesentation of my post. Next time I’ll post my code between the right tag.

Have a great day!!!

9

Don’t forget the hreflang attribute. It tells Google which language you are using on a specific page, so the search engine can serve that result to users searching in that language.

Code sample

link rel="alternate" href="http://example.com" hreflang="en-us" />

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.