toggle volume in html5 video

Question

I am trying to build HTML5 video player but the volume seems to be currently an issue for me.

I want the volume bar to change depending on the user clicking on the volume icon. Currently if you click on the volume button it will set the volume value to 0 but then if I click again it should set it to 1. Unfortunately, it stays the whole time in the 0 and doesn't change as I click. My js looks like:

    window.onload = function() {
    //video
    var video = document.getElementsByClassName("js-video-container__video")[0];
    //Buttons 
    var playButton = document.getElementsByClassName("js-video-controls__play-pause")[0];
    var timer = document.getElementsByClassName("js-video-controls__timer")[0];
    var seconds = document.getElementsByClassName("js-video-controls__timer__seconds")[0];
    var minutes = document.getElementsByClassName("js-video-controls__timer__minutes")[0];
    var fullScreenButton = document.getElementsByClassName("js-video-controls__full-screen")[0];
    var volumeButton = document.getElementsByClassName("js-video-controls__volume-icon")[0];
    //sliders
    var seekBar = document.getElementsByClassName("js-video-controls__seek-bar")[0];
    var volumeBar = document.getElementsByClassName("js-video-controls__volume-bar")[0];

    //event listener for the play and pause button

    playButton.addEventListener("click", function() {
        if (video.paused == true) {
            video.play();

        //button text will change to Pause
        playButton.style.backgroundImage='url("https://image.flaticon.com/icons/svg/64/64485.svg")'; 
        playButton.style.backgroundSize="13px";
        } else {
        //pause the video

        video.pause();

        //button will update its text to play
        playButton.style.backgroundImage='url("https://image.flaticon.com/icons/svg/149/149657.svg")'; 
        playButton.style.backgroundSize="13px";
        // playButton.style.backgroundPositionY="4px";

        }
    });

    // Event listener for the full-screen button
    fullScreenButton.addEventListener("click", function() {
        if (video.requestFullscreen) {
        video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); // Firefox
        } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen(); // Chrome and Safari
        }
    });



    // Event listener for the volume button
    volumeButton.addEventListener("click", function() {
        if (volumeBar.value !== 0) {
            console.log("clicked the right button");
            volumeBar.value = 0;
            volumeButton.style.backgroundImage='url("https://image.flaticon.com/icons/svg/2089/2089815.svg")'; 
            volumeButton.style.backgroundSize="13px";
        }  else  {
            volumeBar.value = 1;    
        }
     });




    //event listener for the change bar 
    seekBar.addEventListener("change", function() {
        //calculate the new time 
        var time = video.duration * (seekBar.value / 100);

        //update the video time 
        video.currentTime = time;

    });

    //the change bar will move as the video plays
    video.addEventListener("timeupdate", function() {
        //Calculate the slider value
        var value = (100 / video.duration) * video.currentTime;
        //Update the slider value
        seekBar.value = value;
        console.log(video.currentTime);
        console.log(video.duration)
        seconds.innerHTML = 0 + ":" + Math.floor(video.currentTime) + " / ";
        minutes.innerHTML = Math.floor(video.duration / 60) + ":00";

    });

    //pause the video when the slider handle is being  dragged 
    seekBar.addEventListener("mousedown", function() {
        video.pause();
    });

    //play the video when the 
    seekBar.addEventListener("mouseup", function() {
        video.play();
    });

    volumeBar.addEventListener("change", function() {
        //update the video volume
        video.volume = volumeBar.value;
    });

}

And my html is currently:

      <div class="video-controls">
      <button type="button" class="video-controls__play-pause js-video-controls__play-pause"></button>
      <input type="range" class="video-controls__seek-bar js-video-controls__seek-bar" value="0">
      <div class="video-controls__space"></div>
      <div class="video-controls__timer js-video-controls__timer">
          <div class="video-controls__timer__seconds js-video-controls__timer__seconds">0:00 /</div>
          <div class="video-controls__timer__minutes js-video-controls__timer__minutes"> 0:00</div>
      </div>
      <button class="video-controls__volume-icon js-video-controls__volume-icon"> </button>
      <input type="range" class="video-controls__volume-bar js-video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
      <button type="button" class="video-controls__full-screen js-video-controls__full-screen"></button>
    </div>
  </div>

Answer 1

hey here's my solution I think this is what you want :) https://jsfiddle.net/nb5Lcmvh/

 var volumeButton = $(".js-video-controls__volume-icon");
    //sliders
    var seekBar = $(".js-video-controls__seek-bar");
    var volumeBar = $(".js-video-controls__volume-bar");


$(volumeButton).click(function(){
if ($(volumeBar).val() != 0) {
$(volumeBar).val(0);
 }
 else{
 $(volumeBar).val(1);
 }
});