CODEWITHSUNDEEP
javascriptvariablesif-statementscopeglobal-variables
Jeweetzelf
Jeweetzelf

Reputation: 65

Javascript variables inside if else statement

I have a custom volume bar and mute button in my music player. Muting is very simple, but I want to return the previous volume when the button is clicked for the second time.

Example: Let's say the current volume is at 50%. Clicking the mute button will change it to 0. Clicking it again should get it back to 50%.

This is how I tried it:

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

The 2 variables that hold the position of the handler and the volume are given a value within the if-statement, meaning they don't have one in the else-statement.

Declaring them outside of the statements means that the values will be "overwritten" by 0.

Is there a way to save the values and use them for the next click on the button?

Edit (solution): The values that the if-statement assigned to the variables, could only be used by the else-statement if the variables were declared outside of the function.

Upvotes: 0

Views: 511

Answers (4)

PresagioS
PresagioS

Reputation: 26

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

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386624

You could use an IIFE (immediately-invoked function expression) with a closure over lastHead and 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);

Upvotes: 1

Izzat Hajj Shehadeh
Izzat Hajj Shehadeh

Reputation: 21

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

Upvotes: 1

Alice Yu
Alice Yu

Reputation: 176

Set a global variable outside of your loop and assign it to the volume before it gets set to 0. Then reference that variable in your else statement!

Upvotes: 0

Related Questions