Q:

How to print the result of a JavaScript function

I'm working on getting the result of a function printed onto the screen.
The function works, it calculates the fibonaaci sequence based on an integer.
But I don't know how to get it displayed using innerHTML. 
Here's the code:

var number = document.getElementsByClassName('enter')[0].value;

var a = parseInt(number);

function fib(a) {
    if (a <= 1) return 1;
    return fib(a - 1) + fib(a - 2);

    var print = document.getElementsByClassName('sequence').innerHTML = a;
}
<form action="" class="form">
  <input type="number" min="1" max="10" placeholder="enter a number (max of 50)" class="enter">
  <input onclick="fib()" type="submit">
</form>
<p class="sequence"></p>

A:

The problem with your algorithm is that you are using recursion to find the sequence. This is a very expensive operation, as it performs many operations. Using that, it's very easy to exceed the maximum call size.
A better option would be to create an array with numbers and populate the array by taking only the last and second to last numbers. With this approach, you can enter a number up to 1,000 and get results almost instantly. Try it out here.

var sequence = document.getElementById("sequence");
var btn = document.getElementById("getSequence");

function fib(a) {
    var numbers = [1,1];
    var num = +(document.getElementById("num").value);
    if (num) {
        while (numbers.length < num) {
            numbers[numbers.length] = numbers[numbers.length - 1] + numbers[numbers.length - 2];
        }
    sequence.innerHTML = numbers.join(',');
    }
    else {
        sequence.innerHTML = "Select a number first ";
    }
}

btn.addEventListener("click", function() {
    var input = +(document.getElementById("num").value);
    fib(input);
});
<input type="number" id="num" min="1" max="1000" />

<button id="getSequence">Get Sequence</button>

<p id="sequence"></p>

