Tengo un control deslizante que pasará por cada función en una matriz de funciones, también tengo otra matriz con datos, cuando llamo a una función para mostrar datos en la consola, muestra mi matriz [], pero cuando quiero mostrar los datos de la matriz [] en div se muestra indefinido. ¿Qué tengo que hacer?
const textContent = document.getElementById("textContent");// a div const next = document.getElementById("next");// a button const prev = document.getElementById("prev");// a button const array = [ "They both die at the end", "What if it's us", "Tuesday with Morrie", "Second life of Ove", "Flowers for Algernon", "The Minds of Billy Milligan", "The Fifth Sally", "The Touch", "Adele", "The Girl Before" ]; function first(){ console.log("1"); }; function second(){ for(item in array){ textContent.innerHTML += `${array[item]}<br>`; } }; function third(){ console.log("3"); }; function four(){ console.log("4"); }; function five(){ console.log("5"); }; const functions = [ first, second, third, four, five ]; number = 0; function skip() { if(number > functions.length - 1){ number = 0; } if(number < 0){ number = functions.length - 1; } f = functions[number]; textContent.innerHTML = f(); } next.addEventListener("click", () => { number += 1; skip(); }) prev.addEventListener("click", () => { number -= 1; skip(); })En su función de omisión, está configurando textContent.innerHTML para que sea el resultado de la función actual. Y su second función no devuelve nada.
Puede devolver resultados de todas las funciones como esta
function second(){ let innerHTML = ""; for(const item in array){ innerHTML += `${array[item]}<br />`; } return innerHTML; }; O en su función de omisión, llame a la función actual y evite establecer innerHTML en su valor de retorno.
f = functions[number]; f();Puede ver una demostración funcional aquí https://codepen.io/abito12/pen/RwMRqro