Q:

Javascript function returns Uncaught TypeError: Cannot read property 'innerHTML' of null

So, i'm trying to make a small algorithm for an alphabetical substitution cipher but I have encoutered a problem when the program tries to print the result. The js console on  chrome reutrns "Uncaught TypeError: Cannot read property 'innerHTML' of null"  on lines 55, 77 and 99.
Here is the code : 
<!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>

I would highly appreciate it if you could help me and explain where did I make a mistake!  Thanks!

A:

your div's id is result, not res

