我想通过使用 forEach 方法更改歌曲名称，但它没有改变，也没有显示任何错误答案

【问题标题】：I want to change song name by using forEach method but it doesn't change and doesn't show any error我想通过使用 forEach 方法更改歌曲名称，但它没有改变，也没有显示任何错误
【发布时间】：2021-12-30 11:12:09
【问题描述】：

我想做一些基本的操作，比如更新文档数组。在这个 html 中，我有包含歌曲项目类的歌曲列表（歌曲容器）。我想更改每首歌曲的名称，我尝试了下面的代码，但没有收到期望的输出。

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>

【问题讨论】：

下次可以使用code snippet。我已经帮你做了。
element.getElementsByClassName("songName")[0] 应该是element.getElementsByClassName("songName")[i]？

标签： javascript html arrays foreach

【解决方案1】：

querySelector 返回匹配选择器的第一个元素。请改用querySelectorAll 来获取所有匹配元素的可迭代对象。

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;
});

【讨论】：

另外，只需删除Array.from，因为NodeList 支持forEach。

【解决方案2】：

正如前面的答案中提到的，这一行

let songItem = Array.from(document.querySelector(".songItem"));

只返回类名"songItem" 的第一个元素。为了退回所有这些，您需要使用querySelectorAll。此外，您不必使用Array.from()。因此，您可以改用这一行：

let songItem = document.querySelectorAll(".songItem");

另一方面，在最后一行中，使用element.getElementsByClassName("songName")[0] 可能不是最佳做法，因为“元素”只有一个类名为“songName”的子元素，在这种情况下您可以使用 querySelector；像这样：

element.querySelector(".songName").innerText = songs[i].Name;

【讨论】：