Javascript 模板文字中使用函数时出现意外空白

我正在使用一个流媒体音乐网站的API制作一个应用程序，我遇到了一个问题

当我点击播放按钮时，我得到一个错误：未捕获的语法错误：输入意外结束，当我点击它时，它只显示：document.getElementById(

这是我的密码：

fetch(`https://api.deezer.com/playlist/3155776842`)
.then(res => res.json())
.then((data) =>{
let output = ''

data.tracks.data.forEach(track => {
    output += `<div class="artist">
    <a href="${track.artist.link}"><img src="${track.album.cover_medium}"></img></a>
    <div class="info">
    <p class="title">${track.artist.name}</p>
    <div>
    <audio id="${track.id}" src=${track.preview}></audio>
        <a onclick="document.getElementById("${track.id}").play()"><i class="fas fa-play"></i></a>
        <a onclick="document.getElementById("${track.id}").pause()"><i class="fas fa-pause"></i></a>
    </div>
    </div>
    </div>`

document.getElementById('output').innerHTML = output
});
})

fetch(`https://api.deezer.com/playlist/3155776842`)
.then（res=>res.json（））
。然后（（数据）=>{
让输出=“”
data.tracks.data.forEach（track=>{
输出+=`
${track.artist.name}
`
document.getElementById（'output'）。innerHTML=output
});
})

问题在track.id中

在音频标签中，我收到预期行：

<audio id="123456"> src="www.something.com/img"

src=“www.something.com/img”

但在标签上，我在左边有空间，我认为这就是问题所在：

<a onclick="document.getElementById(" 123456").play()"><i class="fas 
fa-play"></i></a>

我尝试使用常用标记，但不起作用。我也尝试了trim（），但后来出现了一个错误：trim不是一个函数

欢迎任何帮助。 谢谢

---

您必须使用单引号。双引号相互抵消

查看

标记的语法突出显示。通过在双引号中使用双引号，您正在创建一个带有

onclick=“document.getElementById”（

）的元素，后跟一堆垃圾。将其更改为

…getElementById（'${track.id}'）

（单引号）取而代之。@TylerRoper就是这样。非常感谢

<a onclick="document.getElementById('123456').play()"><i class="fas 
fa-play"></i></a>