Как мне сделать этот встроенный JavaScript внешним?

Question

В настоящее время я работаю над расширением chrome музыкального проигрывателя, и мой HTML не отвечает.Я обнаружил, что это потому, что у меня есть встроенный JavaScript с моими функциями onclick.

html:

<button id="pre" onclick="prev()"><img src="images/prev.png" height="90%" width="90%"/></button>
            <button id="play" onclick="playOrPauseSong()"><img src="images/play.png"/></button>
            <button id="next" onclick="next()"><img src="images/next.png" height="90%" width="90%"/></button>

javascript:

function playOrPauseSong(){

if(song.paused)
{
    song.play();
    $("#play img").attr("src","images/pause.png");
}
else
{
    song.pause();
    $("#play img").attr("src","images/play.png");        
}

}

Конечно, у меня есть те же проблемы для функции prev и следующей функции, но все они должны иметь одно и то же решение, которое я принимаю.

Answer 1

Поскольку вы уже используете jQuery (если бы вы этого не сделали, ничего бы не изменилось), вы можете воспользоваться методами привязки событий, предоставляемыми jQuery, например:

HTML:

<button id="play">
    <img src="images/play.png"/>
</button>

JavaScript:

$("#play").on("click", function() {
    if(song.paused) {
        song.play();
        $("#play img").attr("src","images/pause.png");
    }
    else {
        song.pause();
        $("#play img").attr("src","images/play.png");        
    }
}

Таким образом, ваш код JavaScript может быть полностью отделен от разметки HTML.

PS Я бы прокомментировал, но у меня недостаточно репутации для этого.