Javascript runs function only once

Question

The

HTML

<p>What factorial would you want to calculate?</p>
<input id="factorium" type="number">
<input id="submission" type="submit" value="Calculate">

Javascript

function factorial(x) {
    if (x === 0) {
        return 1;
    }
    return x * factorial(x - 1);
}

    var inputBox = document.getElementById('factorium').value;
    var submission = document.getElementById('submission');
    submission.onclick = function(){console.log(factorial(inputBox))};

Edited -

The submit button only works once, I need to refresh the page for it to work again, any idea how to fix this?

Answer 1

Your JavaScript code can be reduced to one line:

document.getElementById('factorium').value();

This is enough to trigger the error. The problem is .value() , which should be .value instead. As the error message says, .value is not a function and can't be called.

Answer 2

I created a new function that only executes the above code as follows:

function getVals(){

    var inputBox = document.getElementById('factorium').value;
    var submission = document.getElementById('submission');
    console.log(factorial(inputBox));
}

and on the input submit button I've added:

<input id="submission" type="submit" value="Calculate" onclick="getVals()">

Answer 3

JS Fiddle Link

<p>What factorial would you want to calculate?</p>
<input id="factorium" type="number">
<input id="submission" type="submit" value="Calculate" onclick="calcFactorial()">

<script>

    function factorial(x) {
        if (x === 0) {
            return 1;
        }
        return x * factorial(x - 1);
    }

        function calcFactorial(){
            var inputBox = document.getElementById('factorium').value;
            var submission = document.getElementById('submission');
            console.log(factorial(inputBox));
        }
</script>