mute/unmute icon js fontawesome-CodePudding

My function should change the icon to mute or to unmute but it sometimes said that the class is undefined. I don't know why.

var i = document.getElementById("sound")
var unmute = false

function change() {
  console.log(i.className)
  if (unmute == false) {
    i.className = "fas fa-volume volumen"
    console.log("unmute")
    unmute = true;
  } else {
    i.className = "fas fa-volume-mute volumen"
    console.log("mute")
    unmute = false
  }

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<strike>
    <i id="sound" onclick="change()" ></i>
<strike>

CodePudding user response：

Try putting the declaration of i inside the function.

var unmute = false;

function change() {
    let i = document.getElementById("sound");
    console.log(i.className)

    if (unmute == false) {
        i.className = "fal fa-volume volumen";
        console.log("unmute");
        unmute = true;
    } else {
        i.className = "fal fa-volume-mute volumen";
        console.log("mute");
        unmute = false;
    }
}

Are you going to use the variable unmute in other functions? If not, you could try doing this instead:

function change() {
    let i = document.getElementById("sound");
    let current_class = i.className;
    
    current_class = current_class == "fal fa-volume-mute volumen" ? "fal fa-volume volumen" : "fal fa-volume-mute volumen";
}

You can also use jQuery to toggle between class names:

$("#sound").on('click', function(){
    $("#sound", this)
         .toggleClass("fal fa-volume volumen")
         .toggleClass("fal fa-volume-mute volumen");
});

CodePudding user response：

this have no sense but it works me i declare the var i (now called sound) as local inside the function and now it works

var unmute = false
function change(){
let sound = document.getElementById("sound")
console.log(sound.className);
if(unmute == false){
sound.className ="fal fa-volume volumen"
console.log("unmute")
unmute = true;
     }
else{
      sound.className ="fal fa-volume-mute volumen"
      console.log("mute")
      unmute = false
    }

    }