Toggle mute button with parameters - Javascript

finntrn
April 17, 2023
148 views
1 vote
2 Answers

I’m trying to make a bunch of toggle mute buttons. To prevent myself from writing a bunch of functions that all do the same thing I use parameters, and I think that is where the code messes up. To my knowledge this is supposed to work if I weren’t using parameters.

let isMuted1 = false,
    isMuted2 = false,
    isMuted3 = false,
    isMuted4 = false,
    isMuted5 = false,
    isMuted6 = false,
    isMuted7 = false;

muteButton1.addEventListener('click', () => {
    muteMonster(monster1, audio1, isMuted1);
})
muteButton2.addEventListener('click', () => {
    muteMonster(monster2, audio2, isMuted2);
})
muteButton3.addEventListener('click', () => {
    muteMonster(monster3, audio3, isMuted3);
})
muteButton4.addEventListener('click', () => {
    muteMonster(monster4, audio4, isMuted4);
})
muteButton5.addEventListener('click', () => {
    muteMonster(monster5, audio5, isMuted5);
})
muteButton6.addEventListener('click', () => {
    muteMonster(monster6, audio6, isMuted6);
})
muteButton7.addEventListener('click', () => {
    muteMonster(monster7, audio7, isMuted7);
})

function muteMonster(monster, audioElement, isMuted) {
    if (!isMuted) {
        isMuted = true;
        monster.style.opacity = "0.5";
        audioElement.muted = true;
    } else {
        isMuted = false;
        monster.style.opacity = "1";
        audioElement.muted = false;
    }
}

I tried making the toggle button by flicking a bool to false if it was true, and to true if it was false. Executing different code depending on the state of the bool. I had to do this for a bunch of buttons so I wrote only one function that takes in a different bool depending on what button you press.

(Also I’m sure there’s a neater way to do what I’m trying to do but I’m a little pressed on time and wouldn’t know how yet)

Answers

You can move isMuted, monster and audio variables into DOM’s attribute. So the button will keep its state (on/off), and the name of a corresponding monster and audio.

Create maps of monsters and audios where name of attribute corresponds to the variable. Then call setButtonAttributes to set names of audios and monsters as button attributes.

It is important that in buttons array you keep DOM objects, you can get them with methods like document.getElementById("BUTTON_ID"), document.getElementsByTagName("button), etc.

let buttons = [...] // here enumerate all your buttons
let monsters = {
    monster1: monster1, 
    monster2: monster2,...
} // keep your monster variables in a map
let audios = {
} // audios' map similar to monsters' one

for(let button of buttons) {
    button.onclick = () => muteMonster(button)
}

function muteMonster(button) {
    let monster = monsters[button.getAttribute("monster")]
    let audioElement = audios[button.getAttribute("audio")]
    if (!button.getAttribute("isMuted")) {
        button.setAttribute("isMuted", true);
        monster.style.opacity = "0.5";
        audioElement .muted = true;
    } else {
        button.setAttribute("isMuted", false);
        monster.style.opacity = "1";
        audioElement.muted = false;
    }
}

setButtonAttributes() {
    let iter = 0;
    for(let button of buttons) {
        button.setAttribute("monster", `monster${iter++}`)
        button.setAttribute("audio", `audio${iter++}`)
    }
}

setButtonAttributes()

Here is a way to populate your Arrays with the correct values (all = true at start) for your boolean Array, the references in monsters Array…

The last function function resetToTrue(index) update the boolean Array and avoid to have more than one monster not muted.

TAKE CARE : Click on "Full page" when you run the snippet if you do not want to see the logs over your buttons, they will not be clickable otherwise!

Have a nice day.

        let nbElements = 7;
        let monsters=[];
        let buttons=[];
        let isMuted=[];
        window.addEventListener("DOMContentLoaded",createTables);
        function createTables(){
            for(var i = 0; i < nbElements; i++){
                monsters.push(document.getElementById("monster_" + (i+1)));
                buttons.push(document.getElementById("button_" + (i+1)));
                isMuted.push(true);
                monsters[i].textContent = "monster n°" + (i+1) + " muted = " + isMuted[i] + " audio_" + (i+1) + " = " + !isMuted[i];
                monsters[i].style.opacity = 0.5;
                buttons[i].addEventListener("click",buttonClickHandler);
            }
        }
        function buttonClickHandler(e){
            isMuted[this.value-1] = !isMuted[this.value-1];
            monsters[this.value-1].textContent = "monster n°" + this.value + " muted = " + isMuted[this.value-1] + " audio_" + this.value + " = " + !isMuted[this.value-1];
            
            resetToTrue([this.value-1])
        }
        function resetToTrue(index){
            for(var j = 0; j < nbElements; j++){
                if(isMuted[j]==false){
                    isMuted[j]=true;
                    isMuted[index]=false;
                }
                monsters[j].textContent = "monster n°" + (j+1) + " muted = " + isMuted[j] + " audio_" + (j+1) + " = " + !isMuted[j];
                if(isMuted[j]){
                    monsters[j].style.opacity = 0.5;
                }else{
                    monsters[j].style.opacity = 1;
                }
            }
            console.log("isMuted Array = " + isMuted);
        }

    <div id="monster_1">monster</div>
    <div id="monster_2">monster</div>
    <div id="monster_3">monster</div>
    <div id="monster_4">monster</div>
    <div id="monster_5">monster</div>
    <div id="monster_6">monster</div>
    <div id="monster_7">monster</div>
    <button id="button_1" name="button_1" value="1">button_1</button>
    <button id="button_2" name="button_2" value="2">button_2</button>
    <button id="button_3" name="button_3" value="3">button_3</button>
    <button id="button_4" name="button_4" value="4">button_4</button>
    <button id="button_5" name="button_5" value="5">button_5</button>
    <button id="button_6" name="button_6" value="6">button_6</button>
    <button id="button_7" name="button_6" value="7">button_7</button>

If multiple monsters may be "un-muted" , just comment those lines in the function resetToTrue() like this :

/*
if(isMuted[j]==false){
    isMuted[j]=true;
    isMuted[index]=false;
}
*/

Please signup or login to give your own answer.

Click here to cancel reply.

Toggle mute button with parameters – Javascript

Answers