How can I switch on/off button effects using a function?

Hi everyone!

I am trying to add a new function into my start game button in which will turn on and off the entire button effects.

As you can see I create a function which contains all button effects and am calling this function into another function called startGame that I would like to switch on/of when clicked.

In this part, I am pretty lost and your help would be of great value!! thank you

let blueBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
let redBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
let yellowBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
let greenBtnAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');

// VARIABLES - DOM QUERIES

const btnBlue = document.querySelectorAll("#btnBlue");
const btnGreen = document.querySelectorAll("#btnGreen");
const btnRed = document.querySelectorAll("#btnRed");
const btnYellow = document.querySelectorAll("#btnYellow");

const startButton = document.querySelectorAll("startButton");

//jQuery
$(document).ready(function() {

  function buttonEffects() {
    //button effects 
    //button blue effect
    var blueButtonEffect = $(btnBlue).click(function() {
      var originalColor = $(this).css('background-color');
      blueBtnAudio.play();
      $(this).css('background-color', '#00FFFF');
      setTimeout(function() {
        $(btnBlue).css('background-color', originalColor);
      }, 100);
    });
    //button green effect
    var greenButtonEffect = $(btnGreen).click(function() {
      var originalColor = $(this).css('background-color');
      greenBtnAudio.play();
      $(this).css('background-color', '#7FFF00');
      setTimeout(function() {
        $(btnGreen).css('background-color', originalColor);
      }, 100)
    });
    // button red effect
    var redButtonEffect = $(btnRed).click(function() {
      var originalColor = $(this).css('background-color');
      redBtnAudio.play();
      $(this).css('background-color', '#F08080');
      setTimeout(function() {
        $(btnRed).css('background-color', originalColor)
      }, 100);
    });
    // button yellow effect
    var yellowButtonEffect = $(btnYellow).click(function() {
      var originalColor = $(this).css('background-color');
      yellowBtnAudio.play();
      $(this).css('background-color', '#F0E68C');
      setTimeout(function() {
        $(btnYellow).css('background-color', originalColor)
      }, 100);
    });
  }

  function startGame() {
    
      $(startButton).on('click', buttonEffects);
    };

  
});

You need to move the button click logic out of this function and have this function only do what you want which I assume is to toggle the background colors and play a sound?

Is this all of your code or just a part of it?

Hi @RandellDawson. this is what I currently have. I made the button effects already, what I need to do is just make them “on” (work) when the button start is clicked. as you can see I made the function startGame() that will handle its task but I don’t really know what to do. I checked online but I did not find the answer.

here is the link that you can see:

https://simon-project-eliasprado.c9users.io/indext.html

You need to make a couple modifications.

First either get rid of:

const btnBlue = document.querySelectorAll("#btnBlue");
const btnGreen = document.querySelectorAll("#btnGreen");
const btnRed = document.querySelectorAll("#btnRed");
const btnYellow = document.querySelectorAll("#btnYellow");

const startButton = document.querySelectorAll("startButton");

and modify your selectors for the click events (see example of the blue button):

    var blueButtonEffect = $('#btnBlue').click(function() {
      var originalColor = $(this).css('background-color');
      blueBtnAudio.play();
      $(this).css('background-color', '#00FFFF');
      setTimeout(function() {
        $(btnBlue).css('background-color', originalColor);
      }, 100);
    });

OR modify those initializations (see example of blue button):

const btnBlue = '#btnBlue';
1 Like

Jesus, I did not know that I could declare straight a variable to an id without the use of document.querySelector().

Haha, you are fantastic, I don’t know if you gave that tip purposely but I found the bug. Holy Cow!!

it’s working right now!! xD

Thank you!!

Now that you have that working, if you want to make your code DRY, you could do something like:

const startButton = '#startButton';

const buttons = {
  btnBlue: {
    audio: 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3',
    origBgColor: 'blue',
    clickBgColor: '#00FFFF'
  },
  btnGreen: {
    audio: 'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3',
    origBgColor: 'green',
    clickBgColor: '#7FFF00'
  },
  btnRed: {
    audio: 'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3',
    origBgColor: 'red',
    clickBgColor: '#F08080'
  },    
  btnYellow: {
    audio: 'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3',
    origBgColor: '#FF9914',
    clickBgColor: '#F0E68C'
  },       
};

//jQuery
$(document).ready(function() {

  //button effects 
  function buttonEffects() {
    $.each(buttons, function(btnName, btnObj) {
      var $btn = $('#' + btnName);
      var audio = new Audio(btnObj.audio);
      $btn.click(function() {
        audio.play();
        $btn.css('background-color', btnObj.clickBgColor);
        setTimeout(function() {
          $btn.css('background-color', btnObj.origBgColor);
        }, 100);
      });   
    });
  }

  function startGame() {
    $(startButton).on('click', buttonEffects);
  }
  startGame();
});

By having a buttons object like I show above, you can refer to the various properties later when you write the rest of your game’s logic.

EDIT: If you want to clean up the code a bit more, you can destructure the $.each method’s callback parameters:

    $.each(buttons, function(btnName, { audio, clickBgColor, origBgColor }) {
      var $btn = $('#' + btnName);
      var audio = new Audio(audio);
      $btn.click(function() {
        audio.play();
        $btn.css('background-color', clickBgColor);
        setTimeout(function() {
          $btn.css('background-color', origBgColor);
        }, 100);
      });   
    });
  }
1 Like

Thank you. I will follow your advice. Outstanding!!!

jQuery is really using the following behind-the-scenes (plus some other stuff):

document.querySelectorAll('#btnBlue')

when you write:

$('#btnBlue')
1 Like