dustinrichards
dustinrichards

Reputation: 35

Chrome claims simple function is undefined

I've made a little morse code translator in my free time, and just tried it out in Chrome for the first time. When the translate() function is called, Chrome throws Uncaught TypeError: translate is not a function at HTMLInputElement.onclick (morse:28) in my face. The other fuctions work as expected, and translate() can be called from the console without issue. In addition, it works perfectly in Firefox.

Relevant (I think) HTML:

<div id="mainspan">

    <form id="morseForm">
        <textarea id="morseInput" rows="8" cols="50"></textarea><br><br>

        <input type="radio" name="trans" id="mtt" value="morseToText"><label for="mtt">Morse &rarr; text</label><br>
        <input type="radio" name="trans" id="ttm" value="testToMorse"><label for="ttm">Text &rarr; morse</label><br>
        <input type="button" onclick="translate()" value="Translate"><br><br>

        <textarea id="morseOutput" rows="8" cols="50"></textarea><br>
    </form>

</div>

And the JS:

function translate() {
    if (document.getElementById("mtt").checked == true) {morseToText()};
    if (document.getElementById("ttm").checked == true) {textToMorse()};
}

Upvotes: 0

Views: 187

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

This is probably an "unwanted feature" of Chrome, translate seems to have some "special meaning" event though it is usually undefined

<script>
  function translate () {
    alert('or nah');
  }
</script>
<button onclick="translate()">
  translate!
</button>

Doesn't work, however,

<script>
  function translate () {
    alert('or nah');
  }
  window.onload = function() {
    document.querySelector('button').addEventListener('click', translate);
  }
</script>
<button>
  translate!
</button>

works - essentially the same, but obviously not

simplest solutions

  1. use addEventListener method to add the click event to the button, or
  2. don't use the name translate

Upvotes: 1

Related Questions