如果else語句中的Javascript變量

我的音樂播放器中有一個自定義音量欄和靜音按鈕。靜音非常簡單，但是我想在第二次點擊按鈕時返回前一個音量。如果else語句中的Javascript變量

例如：比方說，目前的數量是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個變量給出if-statement內的值，這意味着他們沒有一個在else-statement。

在聲明之外聲明它們意味着值將被0「覆蓋」。

有沒有辦法保存這些值並將它們用於下次點擊按鈕？

編輯： 的if-statement分配給variables的值，只能由else-statement使用，如果variables被宣佈的function之外。

來源

2017-08-02 PeterPrakker

*持有的處理器和體積的位置的2個變量if語句內聲明的，也就是說他們不是在else語句訪問* - 這是不是在使用'var'時爲true，它們被懸掛在函數的頂部。當使用'let'或'const'時，一個變量的作用域只限於一個語句塊。無論如何，解決您的問題的方法是在函數外部聲明變量 –

您需要將音量保存在函數'muteSound'之外的變量中，即將所有其他'volumebar'變量等都存儲在變量之外。從概念上說：您應該將一個事件處理程序附加到每次移動時更新'volume'變量的音量欄;所以'volume'總是包含當前選擇的音量。當單擊「靜音」時，您將音量靜音並呈現您的用戶界面以指示靜音音量; **您不會更改'音量'的值。**取消靜音時，您可以恢復音量並再次更新UI。 – deceze

@MikaelLennholm當我console.log變量都在if和else語句中時，else語句中的變量返回undefined。 – PeterPrakker

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; 
    } 
}

來源

2017-08-02 15:07:49 PresagioS

雖然此代碼可能會回答問題，但提供有關_how_和/或_why_的其他上下文可以解決問題，從而提高答案的長期價值。 – JosefZ

在你的循環之外設置一個全局變量，並在它被設置爲0之前將其賦值給該卷。然後在你的else語句中引用該變量！

來源

2017-08-02 14:57:18

您可以使用一個IIFE（immediately-invoked function expression），關閉時間大於lastHead和lastVolume;

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);

來源

2017-08-02 14:57:54

@deceze會使'靜態'功能解決這個問題？ – Jerry

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; 
} 
}

來源

2017-08-02 15:02:33

如果else語句中的Javascript變量

回答

相關問題