个人中心
gpt4 book ai didi

javascript - Chrome找不到firefox和eclipse的功能

转载 作者：行者123 更新时间：2023-11-27 22:30:22 25 4
gpt4 key购买 nike

我希望我笨手笨脚的业余代码不会冒犯，但我正在编写一个非常简单的凯撒密码程序，并且遇到了一个奇怪的问题。当我在 eclipse 或 Firefox 中运行此页面时，它工作正常，但当我在 chrome 中运行它时(这样我可以利用我知道的开发工具)，当我单击按钮时，它找不到翻译功能。

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

知道发生了什么吗？ 

<?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>

最佳答案

显然，这是因为在 on* 属性的上下文中，触发事件影子全局变量的元素属性。

检查一下!:

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

在 Chrome 中，translate 是 button 的 bool 属性，但 Firefox 没有这样的属性。

您可能听说过 onclick 和公司是不好的做法，我建议 using addEventListener instead 。或者，您可以将函数名称更改为不会发生冲突的名称，或使用 onclick="window.translate()"。

关于javascript - Chrome找不到firefox和eclipse的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39647575/

25 4 0
文章推荐： javascript - 我应该 "require"静态图像吗
文章推荐： javascript - 将数据传递给 jQuery 模式
文章推荐： javascript - 加载 Web 所需的 JavaScript 文件
文章推荐： javascript - polymer - slider 前/后
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com