I want to do basic operation like update with array of document. In this html I have song List (song-container) that contains song Item class. I want to change each song name and I tried below code but I did not received desire output.
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 returns the first element matching the selector. Use querySelectorAll instead to get an iterable of all matched elements.
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;
});
As mentioned in the previous answers, this line
let songItem = Array.from(document.querySelector(".songItem"));
returns only the first element with class name "songItem". In order to return all of them you need to use querySelectorAll. Also, you don't have to use Array.from(). Therefore, you can use this line instead:
let songItem = document.querySelectorAll(".songItem");
On the other hand, in the last line, using element.getElementsByClassName("songName")[0] might not be the best practice, since "element" has only one child element with class name "songName", you can use querySelector in this case; like this:
element.querySelector(".songName").innerText = songs[i].Name;