CODEWITHSUNDEEP
javascripteclipsegoogle-chromefirefox
Cymon
Cymon

Reputation: 107

Chrome can not find function firefox and eclipse does

I hope my fumbling amateur code doesn't offend, but I'm writing a very simple Caesar cipher program and I'm running into an odd problem. When I run this page in eclipse or Firefox it works fine but when I run it in chrome (so I can take advantage of the development tools I know) it can't find the translate function when I click the button.

index.html:62 Uncaught TypeError: translate is not a function

Any clue what's happening? 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Decoder Ring Program</title>
<meta http-equiv="content-type" 
content="text/html;charset=utf-8" />
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    codeWheel = "abcdefghijklmnopqrstuvwxyz";

    $(document).ready(function(){
        document.getElementById('codeWheel').innerHTML = codeWheel.toUpperCase();
    });

    function isAlpha(str) {
        return str.length === 1 && str.toLowerCase().match(/[a-z]/i);
    }

    function translate() {
        plaintext = document.getElementById('inputText').value.toLowerCase();
        key = document.getElementById('key').value.toLowerCase().charCodeAt() - 'a'.charCodeAt();
        translated = "";
        direction = document.querySelector('input[name = "direction"]:checked').value;
        for (i = 0; i < plaintext.length; i++) {
            letter = plaintext[i];
            letterValue = plaintext[i].charCodeAt() - 'a'.charCodeAt();

            if (!isAlpha(plaintext[i])) {
                translated += letter;
            } else {
                if (direction == 'encode') {
                    translated += codeWheel[(letterValue + key) % 26];
                } else {
                    index = codeWheel.indexOf(letter);
                    translated+= String.fromCharCode('a'.charCodeAt() + (26 + index - key) % 26);
                }
            }
        }

        document.getElementById('output').innerHTML = translated.toUpperCase();
    }
</script>
</head>

<body>
    <h1>Decoder Ring</h1>
    <div id="codeWheel"></div>
    <hr/>
    <div>
        PlainText <input type="text" name="inputText" id="inputText"></input><br/>
        Key <input type="text" name="key" id="key"></input>
        <form>
            <input type="radio" name="direction" value="encode" checked>Encode
            <input type="radio" name="direction" value="decode" >Decode
        </form>
        <button onclick="translate()">Translate</button>
    </div>
    <hr/>
    <div id="output"></div>
</body>

</html>

Upvotes: 1

Views: 58

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60577

Apparently, this is because in the context of an on* attribute, properties of the element triggering the event shadow global variables.

Check it out!:

var id = "I get shadowed";
<button id="testing" onclick="alert(id)">click me</button>

In Chrome, translate is a boolean property of a button, but Firefox has no such property.

You may have heard onclick and company are bad-practice, I'd recommend using addEventListener instead. Alternately, you could change your function name to something which does not collide, or use onclick="window.translate()".

Upvotes: 1

Related Questions