Obliczanie miejsc zerowych w JS

pytanie zadane 15 kwietnia 2017 w JavaScript przez wazon Nowicjusz (200 p.)

Może mi ktoś dać wskazówke dlaczego skrypt mający obliczyć miejsca zerowe nie chce działać? Przyczyna pewnie jest prozaiczna, ale ja mam do czynienia z js od wczoraj i nie wiem gdzie popełniam błąd.

kod:

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="kalk.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Racing+Sans+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <script type="text/javascript">
        var a = document.getElementById('a').value;
        var b = document.getElementById('b').value;
        var c = document.getElementById('c').value;
        var delta = Math.pow(b, 2) - (4 * a * c);
        if (delta < 0) {
            document.getElementById("eval").addEventListener("click", noX);

            function noX() {
                document.getElementById("outputDiv").innerHTML = "Brak rozwiązań";
            }

        } else if (delta === 0) {
            var x0 = (-b) / (2 * a); {
                document.getElementById("eval").addEventListener("click", oneX);

                function oneX() {
                    document.getElementById("outputDiv").innerHTML = "rozwiązanie to: " + x0;

                }
            }
        } else {
            var deltaP = Math.sqrt(delta);
            var x1 = (-b - deltaP) / (2 * a);
            var x2 = (-b + deltaP) / (2 * a); {
                document.getElementById("eval").addEventListener("click", twoX);

                function twoX() {
                    document.getElementById("outputDiv").innerHTML = "rozwiązania to: " + x1 + x2;
                }
            }
        }
    </script>
</head>

<body>
    <h1> Rozwiąż równanie kwadratowe!
    </h1>
    <div class="container">
        <div class="calculator">
            <div class="calculator-top">
                <span class="clear"> C
</span>
                <div class="equation">
                    <input type="text" value="0" id="a" /> x
                    <sup> 2
</sup> +
                    <input type="text" value="0" id="b" /> x +
                    <input type="text" value="0" id="c" /> = 0
                </div>
            </div>
            <div class="keys">
                <span> 9
</span>
                <span> 8
</span>
                <span> 7
</span>
                <span> 6
</span>
                <span> 5
</span>
                <span> 4
</span>
                <span> 3
</span>
                <span> 2
</span>
                <span> 1
</span>
                <span> 0
</span>
                <span> .
</span>
                <span id="eval">=
</span>
            </div>
        </div>
    </div>
    <div id="outputDiv"></div>

</body>

w konsoli wyświetla się: TypeError: document.getElementById(...) is null, pomimo że pola są uzupełnione prawidłowo. Dodam, że kiedy zamiast funkcji wpisywałam console.log(wyniki) wszystko działało prawidłowo. Z góry dzi ęki