Tengo varias letras, cada una escrita en su propio lapso bajo una etiqueta h1, escrita en el archivo HTML. Luego quiero recorrer estas letras y combinar todas las letras de los elementos de intervalo en una sola cadena que se vea así: "¡Pase el cursor sobre mí!" (con los espacios). Completé el bucle for y extraje el HTML interno para cada letra, pero me cuesta convertirlo en una sola cadena, aquí está mi código HTML y JS.
let text = document.querySelectorAll(".letter"); for (let i = 0; i < text.length; i++) { let array = []; let letters = text[i].innerHTML; console.log(letters); } <h1> <span class="letter">H</span> <span class="letter">o</span> <span class="letter">V</span> <span class="letter">E</span> <span class="letter">R</span> <span> </span> <span class="letter">O</span> <span class="letter">V</span> <span class="letter">E</span> <span class="letter">R</span> <span> </span> <span class="letter">M</span> <span class="letter">E</span> <span class="letter">!</span> </h1>>Obtenga todos los elementos de intervalo, itere sobre ellos tomando su contenido de texto y colóquelo en una matriz. Si la letra está en el primer índice de la cadena, póngala en mayúsculas, de lo contrario, en minúsculas. Luego, join la cadena y regístrela en la consola o agréguela como el contenido de texto de otro elemento como lo he hecho aquí.
(Eliminé todas las identificaciones porque una identificación debe ser única, y en su mayoría eran redundantes aquí).
const output = document.querySelector('.output'); const spans = document.querySelectorAll('span'); // The array is _outside_ of the loop const arr = []; for (let i = 0; i < spans.length; i++) { // Get a letter at the current index const letter = spans[i].textContent; // If it's zero uppercase the letter // otherwise lowercase it, and push it to // the array if (i === 0) { arr.push(letter.toUpperCase()); } else { arr.push(letter.toLowerCase()); } } // `join` the array into a string, and // either log it or add it as the text content // of another element output.textContent = arr.join(''); console.log(arr.join('')); <h1> <span>H</span> <span>o</span> <span>V</span> <span>E</span> <span>R</span> <span> </span> <span>O</span> <span>V</span> <span>E</span> <span>R</span> <span> </span> <span>M</span> <span>E</span> <span>!</span> </h1> <div class="output"></div>Suponiendo que haya rellenado correctamente la matriz de texto (y teniendo en cuenta que probablemente podría combinar la extracción y la creación de cadenas en un solo ciclo), la respuesta directa es:
var letters; for (let i = 0; i < text.length; i++) { let letters += text[i].innerText; } console.log(letters);Editado, basado en comentarios y probablemente tampoco queramos registrar iterativamente el proceso de nuestro bucle, por lo que sacamos el registro del bucle.
¿Qué pasa con esta solución:
// Select the characters by the tag... const letters = document.getElementsByTagName('span'); // ... or by the class name // const letters = document.getElementsByClassName('letter'); // Your final string let str = ''; // Iterate over array of letters for (let char of letters) { // Write each single character into variable 'str' str += char.textContent; } // Your result console.log(str); <!-- Don't apply same id to several elements, that's invalid HTML. Use classes instead --> <h1> <span class="letter">H</span> <span class="letter">o</span> <span class="letter">V</span> <span class="letter">E</span> <span class="letter">R</span> <span> </span> <span class="letter">O</span> <span class="letter">V</span> <span class="letter">E</span> <span class="letter">R</span> <span> </span> <span class="letter">M</span> <span class="letter">E</span> <span class="letter">!</span> </h1>