Смена значка кнопки при ее нажатии

[3249]

Добрый день. Столкнулся с такой проблемой. Я сделал кнопку при нажатии на которую включается звук у видео, при повторном нажатии звук выключается. У кнопки есть картинка в виде значка выключенного звука. Как сделать чтоб при нажатии на кнопку значок менялся на нужный и при повторном нажатии значок менялся обратно. При этом кнопка должна продолжать выполнять свою функцию.

HTML

<div align="right"> <input type="image" src="icon/no-audio.png" onclick="mute(this, 'vid1')" class="knopka01" value=""> </div>
</section>

_______________________________________________________________________________________

CSS

.knopka01 {
  display: inline-block;
  width: 40px;
  height: 30px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.8);
  outline: none;
  border: none;
  border-radius: 100px;
  background: rgb(255, 255, 255) radial-gradient(150% 100% at 50% 5px, rgba(255,255,255,.2), rgba(0,0,0,0));
  box-shadow: inset rgba(0,0,0,.6) 0 -2px 5px, inset rgba(252,255,255,.7) 0 2px 5px, rgba(0,0,0,.8) 0 2px 5px -1px;
  color: rgb(0,255,0);
  user-select: none;
} 
.knopka01:hover {
  color: rgb(255,69,0);
  cursor: pointer;
}
.knopka01:active {
  padding-bottom: 1px;
  box-shadow:
   inset rgba(0,0,0,1) 0 1px 3px,
   inset rgba(0,0,0,.6) 0 -2px 5px,
   inset rgba(252,255,255,.7) 0 2px 5px,
   0 1px rgba(255,255,255,.08);
  color: rgb(0,255,214);
}

____________________________________________________________________________________________________________

JS

function mute(btn,elem){
    var video = document.getElementById(elem);
    if (video.muted){
      video.muted = false;
      btn.innerHTML = "Выкл.";
    }     
    else{
      video.muted = true;
      btn.innerHTML = "Вкл.";
    }
        
  }

 

Edited November 16, 2018 by klierik

[Switch74]

а не проще сделать это через checkbox?
http://jsfiddle.net/16fbz584/

в вашем случае что вам мешает в скрипте менять картинку для вашей btn?

[3249]

Спасибо. Прописал картинки в скрипте и все заработало

function mute(btn,elem){
    var video = document.getElementById(elem);
    if (video.muted){
      video.muted = false;
      btn.innerHTML = "Выкл.";
      btn.src="icon/audio.png";
    }     
    else{
      video.muted = true;
      btn.innerHTML = "Вкл.";
      btn.src="icon/no-audio.png";
    }
    
    
  }