Quiero hacer una operación básica como actualizar con una matriz de documentos. En este html, tengo una lista de canciones (contenedor de canciones) que contiene la clase de elemento de canción. Quiero cambiar el nombre de cada canción y probé el siguiente código, pero no recibí el resultado deseado.
let songItem = Array.from(document.querySelector(".songItem")); let songs = [ { Name: "love you zindagi", filePath: "audio/song1.mp3", coverPath: "covers/download.jpg", }, { Name: "zara-zara", filePath: "audio/song5.mp3", coverPath: "covers/download.jpg", }, { Name: "vaaste", filePath: "audio/song8.mp3", coverPath: "covers/download.jpg", }, ]; console.log(songs); songItem.forEach((element, i) => { console.log(element, i); element.getElementsByClassName("songName")[0].innerText = songs[i].Name; }); <div class="songList"> <h1>Best Song Collection</h1> <div class="songItem"> <span class="image"> <img src="covers/download.jpg" /> </span> <span class="songName">love you zindagi</span> <span class="timePlay" ><i class="far fa-play-circle" onclick="songPlay ()"></i ></span> <span class="timeStop" ><i class="far fa-pause-circle" onclick="pauseSong ()"></i ></span> </div> <div class="songItem"> <span class="image"> <img src="covers/download.jpg" /> </span> <span class="songName">love you zindagi</span> <span class="timePlay"><i class="far fa-play-circle"></i></span> </div> <div class="songItem"> <span class="image"> <img src="covers/download.jpg" /> </span> <span class="songName">love you zindagi</span> <span class="timePlay"><i class="far fa-play-circle"></i></span> </div> </div>querySelector devuelve el primer elemento que coincide con el selector. Use querySelectorAll en su lugar para obtener una iteración de todos los elementos coincidentes.
let songItem = Array.from(document.querySelectorAll(".songItem")); let songs = [ { Name: "love you zindagi", filePath: "audio/song1.mp3", coverPath: "covers/download.jpg", }, { Name: "zara-zara", filePath: "audio/song5.mp3", coverPath: "covers/download.jpg", }, { Name: "vaaste", filePath: "audio/song8.mp3", coverPath: "covers/download.jpg", }, ]; console.log(songs); songItem.forEach((element, i) => { console.log(element, i); element.getElementsByClassName("songName")[0].innerText = songs[i].Name; });Como se mencionó en las respuestas anteriores, esta línea
let songItem = Array.from(document.querySelector(".songItem")); devuelve solo el primer elemento con el nombre de clase "songItem" . Para devolverlos todos, debe usar querySelectorAll . Además, no tiene que usar Array.from() . Por lo tanto, puede usar esta línea en su lugar:
let songItem = document.querySelectorAll(".songItem"); Por otro lado, en la última línea, usar element.getElementsByClassName("songName")[0] podría no ser la mejor práctica, ya que "element" tiene solo un elemento secundario con el nombre de clase "songName", puede usar querySelector en este caso; como esto:
element.querySelector(".songName").innerText = songs[i].Name;