Javascript 使用forEach（）或map（）循环更改innerHTMLs无法可靠工作

这一个可能是独一无二的，所以我希望我能在这里得到一些见解。我正在设计一个node.js服务器web应用程序，它使用HTML页面和脚本连接Spotify的web API。它从scripts/api返回一个数组，我将其与forEach（）或map（）循环（我尝试了两者）结合使用，以填充HTML中的这些空格，格式如下：

<div class="d-flex align-items-center">
 <div class="user-img" id="recP1" style="background-image: url(images/orangeRedgrad.jpg)"></div>
  <div class="pl-3">
   <p class="name" id="recN1">No Song Name</p>
   <span class="position" id="recA1">No Artist Name .-.</span>
  </div>
 </div>
</div>

    .then(function (data) {
        var x = 1;
        trackURIs = [];
        console.log(data);
        data.tracks.forEach((data) => {
            //the three console.logs in this section are to show that the array received the data.
            console.log(x + ':');
            console.log(data.name);
            console.log(data.artists[0].name);
            trackURIs.push(data.uri);
            document.getElementById("recP" + x + "").style.backgroundImage = "url(" + data.album.images[0].url + ")";
            document.getElementById("recN" + x + "").innerHTML = data.name;
            document.getElementById("recA" + x + "").innerHTML = data.artists[0].name;
            x += 1;
        });
        //console.log(trackURIs);
    });

我的问题是，x=11到x=20的空格将在第一次有人得到建议时填满，但每次之后，它们都不会改变，并将以前的数据保留在那里。当搜索某些艺术家时，他们甚至不会第一次填充。我的控制台显示我已经收到了数据，所以我有点想不通为什么11-20只是有时候没有响应

forEach（）和map（）都是如此

当更改API请求的歌曲数量（比如从20->12）时，如果代码只可靠地更改了前10首歌曲，那么同样的情况也会发生，而x=11和x=12可能只更改了第一次，之后没有更改，或者根本没有更改

---

为什么是20？API是否每次返回20？还是最多20首？spotify API有一个选项，允许您指定需要多少首歌曲推荐。我将其设置为{limit:20}以接收20首歌曲。另外，这就是我在网页上可用的插槽数量。是的，当限制设置为20时，console.log将打印所有数据，这就是为什么我有这三个console.log。它们完美地显示了曲目号、歌曲名和艺术家名，但未能将其添加到HTML中。占位符在HTML中硬编码，有20个插槽。这就是13号和14号槽，一直没有编辑。当我将其设置为限制时，我没有删除它们：12我讨厌不得不承认这一点，但我只是把底部处理旋转木马的一个js脚本弄糟了。它甚至没有在控制台中发布，idk为什么，但我找到了它。它现在正在完美地旋转旋转木马。我很抱歉为这样一个愚蠢的错误耽误了你的时间，但谢谢你继续研究我的问题。我很感激！