else文中のJavascript変数

Question

ミュージックプレーヤーにカスタムボリュームバーとミュートボタンがあります。ミューティングは非常に簡単ですが、もう一度ボタンをクリックすると前の音量に戻ります。

例：現在のボリュームが50％であるとします。ミュートボタンをクリックすると0に変わります。もう一度クリックすると50％に戻ります。

この

は、私はそれを試してみました方法です：

var music = document.getElementById('music'); 
var volumehead = document.getElementById('volume-head'); 
var volumebar = document.getElementById('volume-bar'); 
var mute = document.getElementById('mute'); 

mute.addEventListener("click", muteSound); 

function muteSound(){ 
    if(mute.classList.contains('not-muted')){ 
     // Save current values before changing them 
     var lastHead = volumehead.style.marginLeft; 
     var lastVolume = music.volume; 

     // Change classname for appearance and next click 
     mute.className = "muted"; 

     // Change values to 0 
     volumehead.style.marginLeft = "0px"; 
     music.volume = 0; 
    } else { 
     // Change classname for appearance and next click 
     mute.className = "not-muted"; 

     // Use saved values 
     volumehead.style.marginLeft = lastHead; 
     music.volume = lastVolume; 
    } 
} 

ハンドラとボリュームの位置を保持する2つの変数は、彼らがelse-statementで1を持っていないという意味、if-statement内の値を与えています。

文の外で宣言すると、値は0によって上書きされます。

値を保存してボタンを次にクリックするために使用する方法はありますか？

---

編集：if-statementはvariablesに割り当て 値variablesがfunctionの外宣言された場合、唯一else-statementによって使用することができます。

Answer 1

var music = document.getElementById('music'); 
var volumehead = document.getElementById('volume-head'); 
var volumebar = document.getElementById('volume-bar'); 
var mute = document.getElementById('mute'); 

var lastHead, lastVolume; 

mute.addEventListener("click", muteSound); 

function muteSound() { 
    if (mute.classList.contains('not-muted')) { 
     // Save current values before changing them 
     lastHead = volumehead.style.marginLeft; 
     lastVolume = music.volume; 

     // Change classname for appearance and next click 
     mute.className = "muted"; 

     // Change values to 0 
     volumehead.style.marginLeft = "0px"; 
     music.volume = 0; 
    } else { 
     // Change classname for appearance and next click 
     mute.className = "not-muted"; 

     // Use saved values 
     volumehead.style.marginLeft = lastHead; 
     music.volume = lastVolume; 
    } 
} 

Answer 2

ループ外のグローバル変数を設定し、それをボリュームに割り当ててから0に設定します。その後、その変数をelse文で参照してください！

Answer 3

lastHeadとlastVolumeを超える閉鎖を持つIIFE（immediately-invoked function expression）を使用できます。

var muteSound = function() { 
    var lastHead, lastVolume; 

    return function() { 
     if (mute.classList.contains('not-muted')) { 
      // Save current values before changing them 
      lastHead = volumehead.style.marginLeft; 
      lastVolume = music.volume; 

      // Change classname for appearance and next click 
      mute.className = "muted"; 

      // Change values to 0 
      volumehead.style.marginLeft = "0px"; 
      music.volume = 0; 
     } else { 
      // Change classname for appearance and next click 
      mute.className = "not-muted"; 

      // Use saved values 
      volumehead.style.marginLeft = lastHead; 
      music.volume = lastVolume; 
     } 
    }; 
}(); 

mute.addEventListener("click", muteSound); 

Answer 4

mute.addEventListener("click", muteSound); 
var lastHead = "10px"; 
var lastVolume = 10; 

function muteSound(){ 
if(mute.classList.contains('not-muted')){ 
    // Save current values before changing them 
    lastHead = volumehead.style.marginLeft; 
    lastVolume = music.volume; 

    // Change classname for appearance and next click 
    mute.className = "muted"; 

    // Change values to 0 
    volumehead.style.marginLeft = "0px"; 
    music.volume = 0; 
} else { 
    // Change classname for appearance and next click 
    mute.className = "not-muted"; 

    // Use saved values 
    volumehead.style.marginLeft = lastHead; 
    music.volume = lastVolume; 
} 
}