Javascript 按下按钮时更改图标

发布于12月13日

我有一个带有定制静音控制按钮的视频.我希望图标在点击时更改.以下是我目前拥有的代码:

<video id="myVideo" loop autoplay muted>
  <source src="https://md-testdomein.nl/partyz/wp-content/uploads/2023/12/WEBVERSIE_169_PartyZ_Brandfilm_V8.01.mp4">
</video>

<button id="mute-button" onclick="muteToggle();" type="button">
    <i id="mute-button-icon" class="fa fa-volume-up"></i>
</button>

<script>
function muteToggle() {

    let vid=document.getElementById("myVideo");
    
    let element = document.getElementById("mute-button-icon");

    if(vid.muted){
        vid.muted = false;
        element.classList.toggle("fa-volume-up");
    } else {
        vid.muted = true;
        element.classList.toggle("fa-volume-off");
    }
}
</script>

您可以在此处预览该按钮:https://md-testdomein.nl/partyz/

按钮图标确实会发生变化，但当我第一次点击它时，图标就消失了，第二次出现了‘FA-Volume-Off’图标，第三次出现了‘fa-Volume-up’图标.

音频关闭时应显示"fa-volume-up"图标，音频打开时应显示"fa-volume-off"图标.

这应该很容易，但我想不通.有谁能帮我修一下吗.

const vid = document.querySelector('#myVideo'); const muteIcon = document.querySelector('#mute-button-icon'); document.querySelector('#mute-button').addEventListener('click', e => { vid.muted = !vid.muted; muteIcon.classList.toggle('fa-volume-up'); muteIcon.classList.toggle('fa-volume-off'); });

Javascript 按下按钮时更改图标

推荐答案

Javascript相关问答推荐

有Angular 的material .未应用收件箱中的价值变化

使用复选框在d3.js多折线图中添加或删除线条

引用在HTMLAttributes<；HTMLDivElement>；中不可用

我创建了一个创建对象的函数，我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点？

在Java中寻找三次Bezier曲线上的点及其Angular

为什么客户端没有收到来自服务器的响应消息？

SPAN不会在点击时关闭模式，尽管它们可以发送日志(log)等

打字脚本中方括号符号属性访问和拾取实用程序的区别

是否可以将Select()和Sample()与Mongoose结合使用？

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中？

通过跳过某些元素的对象进行映射

Reaction useState和useLoaderData的组合使用引发无限循环错误

react 路由如何使用从加载器返回的数据

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

如何使用puppeteer操作所有选项

未找到用于 Select 器的元素：in( puppeteer 师错误)

在将元素追加到DOM之前，createElement()是否会触发回流？混淆abt DocumentFragment行为

如何使pdf.js上的文本呈现为可选？

如何在preLoad()中自定义p5.js默认加载动画？

鼠标进入，每秒将图像大小减小5%