mute/unmute icon js fontawesome [closed]

Question

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()" class="fas fa-volume-mute volumen"></i>
<strike>

Answer 1

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
    }

    }