Get the next value within a sequence without using a generator function on click of a button with javascript

Question

What I want to achieve is to be able to get the next value (unique) within a factorialSequence on click of a button.

What I have done so far is to define a factorialSeq() function and a generator() function as shown below. The generator function takes the factorialSeq() as an argument. On click of a button, I was only able to receive the first value in the sequence, but if I log to the console, all the values in the sequence will be returned in the right order.

<button style="padding: 20px" id="nextBtn">Next</button>

<script>

    let nextBtn = document.getElementById('nextBtn');

    function generator(sequencer) {
        const seqArgs = [...arguments];
        seqArgs.shift();
        const seq = sequencer(...seqArgs);
        return {
            next() {
                return seq();
            }
        }
    }

    function factorialSeq() {
        let currentNumber = 1;
        let result;
        return function factorialReturn() {
            if (!result) {
                result = 1;
                return result;
            }

            result *= currentNumber;
            currentNumber += 1;
            return result;
        }
    }

    nextBtn.addEventListener('click', function () {
        var gen = generator(factorialSeq);

        console.log(gen.next());
        // console.log(gen.next());
        // console.log(gen.next());
        // console.log(gen.next());
    });
</script>

I expect the output to be different each time I click the button (ie the next value in the sequence). Please note that I don't want to use the inbuilt generator function in javaScript. Thanks

Answer 1

On click of a button, I was only able to receive the first value in the sequence

That's because you are creating a new sequence on every button click, and log only one value (the first). You'll want to do

var gen = generator(factorialSeq);
nextBtn.addEventListener('click', function () {
    console.log(gen.next());
});

Answer 2

The problem was the following: You redefined generator on each click of #next . So use this instead:

 let nextBtn = document.getElementById('nextBtn'); let resetBtn = document.getElementById('resetBtn'); function generator(sequencer) { const seqArgs = [...arguments]; seqArgs.shift(); const seq = sequencer(...seqArgs); return { next:()=>{ return seq(); } } } function factorialSeq() { let currentNumber = 1; let result; return function factorialReturn() { if (!result) { result = 1; return result; } result *= currentNumber; currentNumber += 1; return result; } } var gen = generator(factorialSeq); nextBtn.addEventListener('click', function () { console.log(gen.next()); }); resetBtn.addEventListener('click', function () { gen = generator(factorialSeq); }); 

 <button style="padding: 20px" id="nextBtn">Next</button> <button style="padding: 20px" id="resetBtn">Reset</button>