Question

我目前正在开发音乐播放器Chrome扩展程序，但是我的HTML无法响应。我发现这是因为我的onclick函数具有嵌入式javascript。

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");        
}

}

关于上一个功能和下一个功能，我当然有相同的问题，但是它们都应该具有我假定的相同解决方案。

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 我会发表评论，但是对此没有足够的声誉。

如何使该内联JavaScript成为外部？

1 个答案: