Issues with the functionality of Google Translate's JavaScript code snippet are causing

After trying out the code snippet provided on w3schools.com, I encountered a discrepancy between the results displayed on the website and those on my personal computer.

<div id="google_translate_element"></div>
<script>

function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en'
    }, 'google_translate_element');
}

</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The console output revealed the following error message:

translate.html:18 GET file://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit net::ERR_FILE_NOT_FOUND
javascriptgoogle-translate

Answer №1

The code snippet from the website w3school contains a bug that needs to be addressed. The instructions provided suggest adding this line to include Google's API:

 <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

However, the problem lies in the trailing //, which mistakenly points to a local file. This means that unless you have downloaded the library and bundled it with your HTML file, the link will not work properly. To fix this issue, it is recommended to link to the online library by including https:

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer №2

While running it locally on your machine, the source file is trying to load from //translate.google, attempting to find this file on Google.

To prevent it from searching for a local file, replace it with:

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

By doing so, it will now search for the file on the internet instead of locally on your machine.

Answer №3

This piece of code written in pure Javascript can easily be implemented into a browser's debug console, a webview, or any website. The example below demonstrates how you can locate an element and modify its content to display a button (you have the flexibility to change any element).

importScriptURI("https://translate.google.com/translate_a/element.js"); 
document.getElementsByTagName("p")[0].innerHTML='<button id="translate_button">Translate</button>';
setTimeout(()=>{ new google.translate.TranslateElement({pageLanguage: 'en'},'google_translate_element');},1000);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating unique numbers in the map reduce process

I have a CSV file containing information on which numbers called each other and the details of the calls like duration, time, etc. My goal is to compile all the numbers that a specific number has called into an array. Each element in this array should be ...

javascriptmongodbmapreducebigdata

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

Here is the scenario: <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="url"></a> </svg> </body> Now, can you utilize the HTML DOM's .querySe ...

javascripthtmldomsvgxlink

Refreshing Javascript with AngularJS

I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...

javascriptjqueryhtmlangularjs

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...

javascripthtmlcsssvg

transferring data from JavaScript to PHP variables

Currently, I am working on a project that involves using ajax to access the database asynchronously. The value retrieved is stored in a JavaScript variable like this: var content=xmlhttp.responseText; My next step is to pass this value to the PHP module ...

phpjavascriptajax

The encoding of Node.js using npm

Looking to install the validate .json file below using npm: { "name": "node-todo", "version": "0.0.0", "description": "Simple todo application", "main": "server.js", "dependencies": { "express": "~3.4.4", "mongoose": "~ ...

javascriptjsonnode.jsnpm

Enhance your VueJs application with Chart.js without having to rely on refs for seamless reactive

Currently, I am delving into the world of VueJs and experimenting with Chart.js (https://github.com/apertureless/vue-chartjs). I attempted to make a doughnut chart reactive, but I achieved this using the ref property which I suspect may not be the best pr ...

javascriptvue.jschart.jsreactive

problem with nwjs chrome extension

My nwjs app has a domain set up, but the generated name is causing an issue (chrome-extensions://namesetinpackagejson.it). The problem is, I can only enable URLs that start with "http://" for Google Drive APIs. How can I resolve this issue? Thank you ...

javascriptnode-webkitnw.jsnwjs

Having trouble getting Vue.js to cooperate with a brand new Laravel 5.8 setup?

I set up a fresh Laravel project using laravel new sample. Then I executed npm install followed by npm run dev. Next, I modified the welcome.blade.php file as shown below: <!DOCTYPE html> <html> <head> <script type="text/j ...

javascriptphplaravelvue.jsnpm

Display four unique automobile insignias using Webcomponent/Stencil.js

Exploring Web Components and Stencil.js for the first time, I'm currently developing an application that offers detailed car information based on the user's selection of car type. The challenge I'm facing involves displaying four different l ...

javascriptreactjsstenciljs

Tips for passing parent component state data to a child component using a variable

In my index.js file, I have a parent component with a state variable x:[] that contains data [{…}, {…}, {…}]. Now, in my child component (child.jsx), I need to save this parent component data [{…}, {…}, {…}] in a variable within the child compo ...

javascriptreactjsmaterial-ui

Linking several asynchronous functions together in JavaScript

class Calculation { constructor(num) { this.num = num; } performAddition() { // code } performSubtraction() { // code } performMultiplication() { // code } performDivision() { // code } } const getResult = async ...

javascriptasync-await

When the button/link is clicked, I must dynamically create a modal popup that includes a user control

I am currently working on improving an asp.net web forms website by incorporating popup modals to display the rental rates for available equipment. The challenge arises when dealing with pages where each piece of equipment has different rates, requiring a ...

javascriptc#htmlbootstrap-4

Explore various queries and paths within MongoDB Atlas Search

I am currently working on developing an API that can return search results based on multiple parameters. So far, I have been able to successfully query one parameter. For example, here is a sample URL: http://localhost:3000/api/search?term=javascript& ...

javascriptmongodbnext.jsmongodb-atlasmongodb-atlas-search

Accessing JSON files locally using JavaScript in IE and Firefox

I am a beginner in JavaScript and currently working on a small HTML page that will be run locally. I have a string in JSON format that I need to store and load as a file on the hard drive. I have managed to store the string using the following code snippe ...

javascriptjsoninternet-explorerloadlocal

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

I have included an animation script for CSS in my markup, but I am encountering the following error: TypeError: $.fn.appear.run is not a function Does anyone know why this is happening and how I can resolve it? /* * CSS3 Animate it * Copyright (c) 2 ...

javascriptjquerycss

Determine whether a given string is a valid URL and contains content

Is there a way to ensure that one of the input fields is not empty and that the #urlink follows the format of a URL before executing this function in JavaScript? $scope.favUrls.$add I'm uncertain about how to approach this. html <input type="te ...

javascriptangularjs

Having trouble identifying whether a file is a picture or video based solely on its extension

My current challenge involves determining whether an uploaded file is a video or a photo. This distinction is crucial as it dictates whether the file should be sent to my telegram bot as a video or photo attachment. Despite having what seems like a logica ...

javascriptnode.jsexpressformidable

Bug in toFixed causing incorrect results

function calculateTaxAndTotalRent(rent) { var phoneCharges = parseFloat($('#phone_charges').val()); phoneCharges = phoneCharges.toFixed(2); rent = parseFloat(rent); rent = rent.toFixed(2); var tax = parseFloat((rent * 15) / 1 ...

javascriptjquery

Javascript error: Function not defined

For some reason, I seem to be hitting a roadblock with this basic function. It's telling me there's a reference error because apparently "isEven" is undefined: var isEven = function(number) { if (number % 2 == 0) { return true; ...

javascript