js添加onclick属性问题

床懒

于 2018-11-14 20:48:57 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：简单音乐播放器

本文链接：https://blog.youkuaiyun.com/qq_26703533/article/details/84073062

简单音乐播放器专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在HTML中button元素未直接定义onclick属性时，如何利用JavaScript的setAttribute方法动态添加这一属性，实现按钮点击事件的绑定。文章还对比了button与audio标签在事件绑定上的差异，展示了在Ajax请求前后添加事件监听器的效果，并提供了成功的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html里的button里没有onclick属性，用js添加

部分代码：

页面：

使用setAttribute()方法

let plays = document.getElementsByClassName("play");
plays[0].setAttribute("onclick","playing()");

结果：

页面：

可能原因：由于歌曲信息是写在json里面的，用js创建标签的形式显示在页面，属性添加前，标签还没生成；button添加onclick属性也要写在Ajax里面。

尝试更正：

成功！！！

意外发现button和audio标签的不同：audio即使不在Ajax里也能使用（button不行）；

在页面上设一个按钮，点击播放音乐；

HTML代码：

 <button class="test001" onclick="test001_play()">播放</button>

js代码：

let music = document.getElementsByClassName("music");
function test001_play(){
    music[0].play();
}

点击按钮效果播放成功：

在Ajax里也可以：