Question

我正在使用一个网站上的API制作一个应用程序，该应用程序流音乐并且出现问题。

当我单击播放按钮时，出现错误：未捕获的SyntaxError：输入的意外结束，当我单击它时，它仅显示以下内容： 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 标签上，我在左侧留有空间，我认为这是问题所在：

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

我尝试使用通用标签，但不起作用。还尝试了 trim（），但随后出现错误： trim不是函数

欢迎任何帮助。谢谢

Answer 1

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

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

模板文字中使用函数的意外空白

1 个答案: