我正在尝试在 javascript 中制作一个简单的按钮来做两件事

Question

我正在寻找一种同时拥有两个独立操作/功能的方法

一个按钮打开和关闭

和一个影响我视频音量的按钮（打开和关闭）

我有两个脚本，但不知道如何将两者合二为一。

这是 2 个脚本：

<button onclick="toggleMute();">Volume</button>
                    
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
                    
<script type="text/javascript"> 
    function toggle(button)
    {
      if(document.getElementById("1").value=="OFF"){
       document.getElementById("1").value="ON";}
    
      else if(document.getElementById("1").value=="ON"){
       document.getElementById("1").value="OFF";}
    }    
</script>
                    
<script>
    function toggleMute() {
        var video=document.getElementById("theplayer")
            if(video.muted){video.muted = false;} 
            else {video.muted = true;}
    };
</script>

这是我的视频:)

<video autoplay="autoplay" loop="" muted="muted" webkit-playsinline="" playsinline="" class="video" id="theplayer" type="video/mp4" width="100%" height="auto" style="display:block; margin:0 ; padding: 0;">
                  <source src="<?php echo get_post_meta( get_the_ID(), 'content-video', true ); ?>" type="video/mp4">
</video>

非常感谢

Answer 1

这里我重构了你的代码

document.querySelector("input").onclick = function() {
  var states = {"OFF": "ON", "ON": "OFF"};
  this.value = states[this.value];
}              

document.querySelector("button").onclick = function() {
  var video = document.getElementById("theplayer");
  video.muted = !video.muted;
}

<button>Volume</button>          
<input type="button" value="ON" style="color:blue">
<br>
<video src="https://res.cloudinary.com/saymoinsam/video/upload/v1541946026/PiratesOfTheCaribbean.mp4" id="theplayer" autoplay="autoplay" loop="" muted="muted">
</video>

这是另一个只使用复选框的实现，因为它是更正确的输入元素，因为它完全是关于打开或关闭的

document.querySelector("#volume-switcher").onchange = function() {
  document.querySelector("#theplayer").muted = !this.checked;
}

#volume-switcher {
  display: none;
}
#switcher-container {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 15px;
  background-color: #eee;
  position: relative;
  box-shadow: 1px 1px 2px #ccc;
  cursor: pointer;
}

#switcher-container:after {
  content: "";
  background-color: white;
  position: absolute;
  top: -2px;
  left: 0;
  width: 20px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 1px 1px 2px #666666;
}

#volume-switcher:checked + #switcher-container {
  background-color: #9999ff;
}

#volume-switcher:checked + #switcher-container:after {
  left: 20px;
}

<input type="checkbox" id="volume-switcher">
<label id="switcher-container" for="volume-switcher"></label>
<br>
<video src="https://res.cloudinary.com/saymoinsam/video/upload/v1541946026/PiratesOfTheCaribbean.mp4" id="theplayer" autoplay="autoplay" loop="" muted="muted">
</video>

Answer 2

感谢大家的帮助以及您对我在 javascript 中的 lvl 的理解:)） @saymoinsam 真的很有帮助，我用 is help 和你的帮助完成了按钮：

在此 Codepen 上查看所有结果（css）：[https://codepen.io/quentindigital/pen/oNxwNrv]

    <video src="https://res.cloudinary.com/quentindigital/video/upload/v1598625047/day20-challenge-quentinrenaux_ylqkl7.mp4" id="theplayer" autoplay="autoplay" loop="" muted="muted">
    </video>

<script>
document.querySelector("input").onclick = function() {
  var states = {"Volume OFF": "Volume ON", "Volume ON": "Volume OFF"};
  this.value = states[this.value];

  var video = document.getElementById("theplayer");
  video.muted = !video.muted;
}
</script>

我正在尝试在 javascript 中制作一个简单的按钮来做两件事

I am trying to make a simple button in javascript doing two stuff

html

javascript

button

toggle