Неожиданный пробел при использовании функции в шаблонном литерале - PullRequest
0 голосов
/ 06 ноября 2018

Я создаю приложение с использованием API с одного веб-сайта, который транслирует музыку, и у меня возникает проблема.

Когда я нажимаю кнопку воспроизведения, я получаю сообщение об ошибке: Uncaught 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 onclick="document.getElementById(" 123456").play()"><i class="fas 
fa-play"></i></a>

Я пытался использовать общие теги, но они не работают. Также пробовал trim () но потом я получил ошибку: trim не является функцией

Любая помощь приветствуется. Спасибо

1 Ответ

0 голосов
/ 06 ноября 2018
<a onclick="document.getElementById('123456').play()"><i class="fas 
fa-play"></i></a>

Вы должны использовать одинарные кавычки. Двойные кавычки отменяют друг друга

...