fibonacci series in javascript in range using document.getelementbyid

JavaScript
<!DOCTYPE html>
<html>

<head>
    <title>Fibonacci Series</title>
</head>
<script>
    function generateFib() {
        var range = document.getElementById("range").value;

        document.getElementById("fibHead").innerHTML = 'Fibonacci Series';
        if (range <= 0) {
            document.getElementById("fibSeries").innerHTML = 'Cannot print fibonacci series';
        }
        var term_one = 0;
        var term_two = 1;
        var fib;

        if (range == 1)
            document.getElementById("fibSeries").innerHTML = term_one;
        else if (range >= 2) {
            document.getElementById("fibSeries").innerHTML = term_one + '<br>' + term_two;
            for (var i = 0; i < range - 2; i++) {
                fib = term_one + term_two;
                document.getElementById("fibSeries").innerHTML +=  '<br>' + fib;
                term_one = term_two;
                term_two = fib;
            }
        }
    }
</script>

<body>

    <input type="number" id="range" name="range">
    <button type="submit" onclick="generateFib()">Generate</button>
    <p id="fibHead"></p>
    <p id="fibSeries"></p>
</body>

</html>
Source