Javascript函数返回Uncaught TypeError:无法读取属性' innerHTML'为null

时间:2015-07-03 23:30:15

标签: javascript html null

所以,我试图为字母替换密码制作一个小算法,但是当程序试图打印结果时我遇到了一个问题。 chrome reutrns上的js控制台" Uncaught TypeError:无法读取属性&inner;内部HTML' of null"在第55,77和99行。

以下是代码:

<!DOCTYPE html>
<html>

<head>
    <title>Alphabetical Subtitution Cipher</title>
</head>

<body>

    <h1>Alphabetical Subtitution Cipher</h1>

    <input type="text" id ="txt"></input>
    <button type="button" onclick="encrypt()">Encrypt!</button>
    <button type="button" onclick="">Decrypt!</button>
    <button type="button" onclick="res.innerHTML = ''; ">Clear!</button>

    <div id="result"></div>


    <script>

        var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
        var symbols = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '-', '=', '+', '[', '{', ']', '}', '/', ';', ':', '"', '|', '.', ',', '<', '>', '?'];

        var txt = document.getElementById('txt');
        var res = document.getElementById('res');

        function encrypt() {

            var spl = txt.value.toLowerCase().split("");

            for(var i = 0; i < spl.length; i++) { //goes through the spl array

                if (spl[i] == ' ') { //if the string is a space
                    res.innerHTML += ' '; //prints space
                }

                else {

                    for(var j = 0; j < letters.length; j++) { //goes through the letters array

                        if(spl[i] == letters[j]) { //if the spl array string equals to the letter array string

                            var ecip = (j * i) + spl.length;

                            if (ecip > letters.length) { //if ecip is out of the array

                                ecip = ecip - letters.length;
                                res.innerHTML += letters[ecip];

                            }
                            else {

                                res.innerHTML += letters[ecip];

                            }

                        } 

                    }

                    for(var k = 0; k < numbers.length; k++) { //goes through the numbers array

                        if (spl[i] == numbers[k]) { //if the spl array string equals to the numbers array currently checked string

                            var ecip = (k * i) + spl.length;

                            if (ecip > numbers.length) { //if ecip is out of the array

                                ecip = ecip - numbers.length;
                                res.innerHTML += numbers[ecip];

                            }
                            else {

                                res.innerHTML += numbers[ecip];

                            }

                        } 

                    }

                    for(var l = 0; l < symbols.length; l++) { //runs through the symbols array

                        if(spl[i] == symbols[l]) { //if the spl array string equals to the symbols array string

                            var ecip = (l * i) + spl.length;

                            if (ecip > symbols.length) { //if ecip is out of the array

                                ecip = ecip - symbols.length;
                                res.innerHTML += symbols[ecip];

                            }
                            else {

                                res.innerHTML += symbols[ecip];

                            }

                        } 

                    }
                }


            }




        }


    </script>


</body>

</html>

如果你能帮助我并解释我在哪里弄错了,我将非常感激!谢谢!

2 个答案:

答案 0 :(得分:0)

可能你需要用反斜杠来渲染符号,因为html和javascript有点像html代码。 Html symbols

答案 1 :(得分:-1)

你的div的id是结果,而不是res