意外的白色 space 在模板文字中使用函数

Question

我正在使用来自一个流媒体音乐的网站 API 开发一款应用程序，我运行遇到了问题。

当我点击播放按钮时出现错误：Uncaught SyntaxError: Unexpected end of input 当我点击它时它只显示：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
});
})

问题在track.id

在音频标签中我得到预期的行：

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

但是在 a 标签上，我在左边得到 space，我认为这就是问题所在：

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

我尝试使用通用标签，但它不起作用。也试过 trim() 但后来我得到一个错误： trim is not a function

欢迎任何帮助。谢谢

Answer 1

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

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

意外的白色 space 在模板文字中使用函数

Unexpected white space using function in template literal

html

javascript

whitespace

template-literals