Tengo un problema en mi siguiente código:
let textPos = document.getElementById('js-headline'); let i = 0; function typewriter() { let letters = ['C', 'o', 'd', 'e', 'X']; if (i < letters.length) { textPos.innerText += letters[i]; i++; setTimeout(typewriter, 1000); } else if (i == letters.length) { let lastLetter = letters[letters.length - 1]; lastLetter.style.color = 'red'; } } typewriter();en mi "si no", selecciono el último elemento de mi matriz y me gusta cambiar el color pero no funciona, aparece un mensaje de error
"Error de tipo no detectado: no se pueden establecer propiedades de indefinido (estableciendo 'color')".
Y una cosa es una locura, puedo poner el último elemento de esta matriz en un cuadro de alerta o en un archivo console.log y me muestra el último elemento...
Está intentando establecer la propiedad .style.color de una cadena, lo cual es imposible. Debe crear un elemento <span> para poder cambiar el color y agregar el <span> en lugar de la letra en sí.
Además, tus condicionales para encontrar el último elemento son incorrectos, así que también lo arreglé.
let textPos = document.getElementById("js-headline"); let i = 0; function typewriter() { let letters = ["C", "o", "d", "e", "X"]; if(i < letters.length - 1) { textPos.innerText += letters[i]; i++; setTimeout(typewriter, 1000); } else { let lastLetter = letters[letters.length - 1]; let span = document.createElement("span"); span.innerText = lastLetter; span.style.color = "red"; textPos.appendChild(span); } } typewriter(); <h1 id="js-headline"></h1>El posicionamiento de los elementos de la matriz comienza desde 0, por lo que cuando dice i == letters.length , esa propiedad no existe de la matriz, el último índice en la matriz es igual a letters.length - 1
necesita cambiar el código a lo siguiente:
let textPos = document.getElementById('js-headline'); let i = 0; function typewriter() { let letters = ['C', 'o', 'd', 'e', 'X']; if (i < letters.length - 1) { textPos.innerText += letters[i]; i++; setTimeout(typewriter, 1000); } else if (i == letters.length - 1) { let lastLetter = letters[letters.length - 1]; lastLetter.style.color = 'red'; } } typewriter();espero haber ayudado
un poco más sobre la indexación de matrices
por ejemplo, en la siguiente matriz, la indexación es como a continuación:
var array = ['a', 'b', 'c', 'd', 'e'] ^ ^ ^ ^ ^ | | | | | 0 1 2 3 4 cuando llame a array.length , devolverá la cantidad de elementos en la matriz, pero el primer índice comienza desde 0
¡Espero que esta demostración de una función de máquina de escribir alternativa ayude!
async function typewrite(word, ele) { const letters = [...word]; const lastLetter = letters.pop(); for (letter of letters) { ele.textContent += letter; await new Promise(r => setTimeout(r, 500)); } const aSpan = document.createElement("span"); aSpan.style.color = "red"; aSpan.textContent = lastLetter; ele.appendChild(aSpan); } typewrite("Hello World!", document.querySelector("#output")); <div id="output"></div>