Resolving IE8 errors - Translate React Public HTML files
Tags: translation, html, react
Published: 2020-03-12 21:29:02

---
title: Resolving IE8 errors - Translate React Public HTML files
published: true
description: This is my final solution for the translate React Public HTML files
tags: #translation #html #react
---
Hello everyone, this post is a revision of this [post](https://dev.to/nkemjiks/translate-react-public-html-files-with-translator-js-f3j) I made earlier on how I added translation to the unsupported_browser.html in the public folder of a react app. 

The goal was to render the page and translate it to the user's preferred language for browsers we don't support like IE 10 below. My earlier solution works perfectly fine for newer browsers but didn't for older browsers.

I ran into issues with the `forEach` and `addEventListener` method as these are not supported by older browser. I also had problems with auto language detection using this `window.navigator.userLanguage || window.navigator.language` as the only possible way to access the user language was from the request header which I don't have access to since our app is a client side app. I had to settle for a dropdown select option where the user will have to select what language the page should be displayed in.

Below was my final solution that worked across modern browsers like Firefox, Chrome, Edge and IE 11, 10, 9, 8 and 7.

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title eo-translator="title"></title>
  </head>
  <body>
    <div>
      <label eo-translator="language" for="language"></label>
      <select id="language">
        <option value="en">English</option>
        <option value="es">Spanish</option>
      </select>
    </div>
    <div class="container">
     <h1 eo-translator="greeting"></h1>
     <h2 eo-translator="question"></h2>
    </div>

    <script src="/path/to/translate.min.js"></script>
    <script type="text/javascript">
      (function () {
        // Construct your dictionary
        const dictionary = {
          en: {
            greeting: 'Hello',
            question: 'How are you doing?',
            title: 'Test title'
          },
          es: { 
            greeting: 'Hola',
            question: '¿Como estas?',
            title: 'Título de la prueba'
          }
        };

        var language = document.getElementById("language");
        translateDOM(language.value);

        language.onchange = function () {
          if (language.value == "es") {
            translateDOM("es")
          } else {
            translateDOM("en")
          }
        }
        
        // The package I took this from is translator.js https://github.com/EOussama/eo-translatorjs
        function translateDOM(language) {
          if (document) {
            var elements = document.querySelectorAll('[eo-translator]');
            for (var i = 0; i < elements.length; i++) {
              translateElement(elements[i], language);
            }
          }
        }

        function translateElement(DOMElement, language) {
          if (DOMElement) {
            var input = DOMElement.attributes['eo-translator'].value;
            DOMElement.innerHTML = translate(input, language);
          }
        }

        function translate(input, language) {
          var languageExist = dictionary.hasOwnProperty(language);

          if (languageExist) {
            return dictionary[language][input];
          }
        }
      })();
    </script>
  </body>
</html>
```

In place of the `forEach`, I had to use for loop. 

```
for (var i = 0; i < elements.length; i++) {
  translateElement(elements[i], language);
}
```
In place of the `addEventListener`, I had to use the onchange method

```
language.onchange = function () {
 if (language.value == "es") {
  translateDOM("es")
 } else {
  translateDOM("en")
 }
}
```