translate is not a function (in 'translate()', 'translate' is true)

user_14510873 0
Viewed 98

I am trying to make a simple latin dictionary. I am new to JavaScript so I am trying to test the input tag with the alert function. In the console, I am receiving the error message after I click the "translate" button. Error: "translate is not a function (in 'translate()', 'translate' is true)".

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Latin Dictionary</title>
  </head>
  <h1 id="main-header">Latin Dictionary!</h1>
  <body>
    <input id="latin-word" placeholder="Latin to English"/>
    <br />
    <button onclick="translate()" id="btn-translate-latin-english">Translate</button>
    <script type="text/javascript" src="translate.js"></script>
  </body>
</html>

JavaScript:

function translate() {
  var latinWord = document.getElementById("latin-word").value;
  alert("word that was entered: " + latinWord);
}

Thank you in advance :)

dom html javascript
3 Answers

To solve it, choose another function name, such as myTranslate().

Why you can't use translate()? Because there's already a built-in translate in HTML. See here.

Note: You can choose whatever you want.

JS Code:

function myTranslate() {
  var latinWord = document.getElementById("latin-word").value;
  alert("word that was entered: " + latinWord);
}

HTML:

<button onclick="myTranslate()" id="btn-translate-latin-english">Translate</button>

Let me know if it works.

user_135403490

I think this error is being called because you are using the script tag after the button tag. I think moving the script into the head of the html will solve the issue

user_121210670

You seem to use the function's name translate which is a reserved word in JavaScript.

translate is a global attribute to make elements translatable or movable.

You must rename the function to fix this error. I used Translate():

function Translate() {
  var latinWord = document.getElementById("latin-word").value;
  alert("Word that was entered: " + latinWord);
}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Latin Dictionary</title>
  </head>
  <h1 id="main-header">Latin Dictionary!</h1>
  <body>
    <input id="latin-word" placeholder="Latin to English"/>
    <br />
    <button onclick="Translate()" id="btn-translate-latin-english">Translate</button>
    <script type="text/javascript" src="translate.js"></script>
  </body>
</html>

user_145084820
Related