我试图在javascript中做一个简单的按钮，做两件事

问题描述

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

打开和关闭按钮

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

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

这是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>

非常感谢

解决方法

我在这里重构了您的代码

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>

,

感谢大家的帮助，以及您对javascript中我的lvl的理解：）） @saymoinsam确实很有帮助，我完成的按钮是help和your：

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

app-csv-header-selection:not(:first) {
    margin-left: 2rem;
}