If you have ever visited a website that offers language translation features, then you have probably encountered a script like the one above. This JavaScript code allows users to translate website content from one language to another.

The code is written in HTML and JavaScript. It consists of a button for each language that the user wants to translate to, and an event listener that triggers the translation when the user clicks the button. The HTML elements with ID “trn” and “trn1” contain the text that will be translated.

Javascript Translate Script

• Home
• Contact
• About
• 🇬🇧
• 🇬🇷

Hello , World! (Translated to English)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

To use this script, you need to include it in your HTML file using a script tag. The script should be placed at the bottom of the HTML file, just before the closing body tag.

Once you have included the script in your HTML file, you can customize it to fit your needs. You can change the language buttons to match the languages you want to offer on your website. You can also update the text that will be translated by changing the ID of the HTML element containing the text.

This is a JavaScript code that adds event listeners to two buttons with classes .engbtn and .grbtn.

When the .engbtn button is clicked, the code updates the content of two HTML elements with the IDs trn and trn1 respectively, with the English translation of “Hello, World!” and a Lorem Ipsum text.

Similarly, when the .grbtn button is clicked, the code updates the same two HTML elements with the Greek translation of “Hello, World!” and a Lorem Ipsum text in Greek.

This code allows for the dynamic translation of text on a web page when the user clicks on a button corresponding to a particular language.

<script>

  // Add event listener for the English button
  document.querySelector('.engbtn').addEventListener('click', function() {
    // Translate the text here and update the elements with ID "trn"
    document.getElementById('trn').innerHTML = 'Hello, World! (Translated to English)';
    document.getElementById('trn1').innerHTML = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';
  });

  // Add event listener for the Greek button
  document.querySelector('.grbtn').addEventListener('click', function() {
    // Translate the text here and update the elements with ID "trn"
    document.getElementById('trn').innerHTML = 'Hello, World! (Translated to Greek)';
    document.getElementById('trn1').innerHTML = 'Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου. Όχι μόνο επιβίωσε πέντε αιώνες, αλλά κυριάρχησε στην ηλεκτρονική στοιχειοθεσία, παραμένοντας με κάθε τρόπο αναλλοίωτο. Έγινε δημοφιλές τη δεκαετία του 60 με την έκδοση των δειγμάτων της Letraset όπου περιελάμβαναν αποσπάσματα του Lorem Ipsum, και πιο πρόσφατα με το λογισμικό ηλεκτρονικής σελιδοποίησης όπως το Aldus PageMaker που περιείχαν εκδοχές του Lorem Ipsum';
  });


</script>

Test your code here

<ul id="example2">
  <li id="example1"><a class="active" href="">Home</a></li>
  
  <li id="example1"><a href="">Contact</a></li>
  <li id="example1"><a href="">About</a></li>
  <li id="example1"><button class="engbtn" id="btnstyle" type="button"> 🇬🇧</button> </li>
    <li id="example1"><button class="grbtn" id="btnstyle" type="button">🇬🇷</button> </li>

</ul>
<br>
<h3 id="trn">Hello , World!  (Translated to English)</h3>
<p id="trn1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Overall, this JavaScript Translate Script is a simple and effective way to make your website accessible to users who speak different languages. By including this script on your website, you can provide a better user experience and increase your website’s accessibility.