How can I make my button toggle a mute and unmuted symbol as well as unmute and mute audio?-CodePudding

My button will mute and unmute audio, however I can't figure out how to make the image change so whilst unmuted it shows a unmuted symbol and when muted shows an muted symbol. Here's my current code:

function toggleMuted() {
  var sound = document.getElementById('sound');
  sound.muted = !sound.muted;
}

<div id="mutebut">
  <button id="soundbutton" onclick="toggleMuted()">Mute|Unmute</button>
</div>
<audio id="sound" autoplay="autoplay" loop="loop">
  <source src="../resources/audio/junglenoise.wav" type="audio/wav">
</audio>

CodePudding user response：

You can use a ternary

const sound = document.getElementById('sound');

document.getElementById("soundbutton").addEventListener("click", function() {
  this.textContent = this.textContent === "Mute