Tengo el siguiente código:
function arraySum(array) { let sum = 0; for (let i = 0; i < array.length; i++) { sum += array[i]; } function getRandomInt(max) { return Math.floor(Math.random() * max); } function superIncreasingSequence(length = 7) { sequence = [getRandomInt(10) + 1]; for (let i = 0; i < length; i++) { sequenceSum = arraySum(sequence); sequence.push(sequenceSum + getRandomInt(10)); } return sequence; } function displaySuperIncreasingSequence(length = 7) { sequence = superIncreasingSequence(length) document.getElementById("superIncreasingSequenceGeneratorResult").innerText = sequence; } const superIncreasingSequenceGeneratorBtn = document.getElementById("superIncreasingSequenceGenerator"); superIncreasingSequenceGeneratorBtn.addEventListener("click", displaySuperIncreasingSequence); <button id="superIncreasingSequenceGenerator" type="button">Generate Sequence</button> <div id="superIncreasingSequenceGeneratorResult">""</div> Cuando ejecuto la función displaySuperIncreasingSequence() en la consola, el código se ejecuta exactamente como se esperaba, mostrando lo siguiente en el div superIncreasingSequenceGeneratorResult :
4,10,18,32,66,133,272,535
PERO, cuando presiono el botón ( id="superIncreasingSequenceGenerator" ) en la página web, ¿se muestra un solo número?
¿Por qué la función se ejecuta de manera diferente dependiendo de si se ejecuta con un clic o si se llama manualmente en la consola?
El problema está aquí:
superIncreasingSequenceGeneratorBtn.addEventListener("click", displaySuperIncreasingSequence); Ese código le dice al navegador que llame a displaySuperIncreasingSequence cuando se hace clic en el botón, pasándole un objeto de evento para el clic . Entonces displaySuperIncreasingSequence recibe ese objeto de evento como length . Cuando su bucle for realiza la verificación de < length , es falso, porque un objeto de evento no se puede convertir en un número, por lo que termina siendo < NaN , que siempre es falso.
Es importante no usar funciones como devoluciones de llamada que no están diseñadas para el lugar donde se usan como devoluciones de llamada, en este caso, como un controlador de eventos DOM.
Puede solucionarlo envolviéndolo en una función para que no se llame con ningún argumento, por lo que aplica la length predeterminada:
superIncreasingSequenceGeneratorBtn.addEventListener("click", () => { displaySuperIncreasingSequence(); });