How can I get multiple variables from a function in javascript

JavaScript
1

I create a function buttonEffects() with four button effects (one effect for each). Therefore, I would like to know how can I bring these variables outside of this function and fetch them into another function? I don’t know whether I am able to do that, or I will need to recreate my code.!?

I already return each of the var on the bottom of the function buttonEffects() such as return (var1, var2, var3, var4); and declare them outside of it but with no success.

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

  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 = "#btnBlue";
  const btnGreen = "#btnGreen";
  const btnRed = "#btnRed";
  const btnYellow = "#btnYellow";

  const startButton = "#startButton";

  const randomColors = ['blueButtonEffect', 'greenButtonEffect', 'redButtonEffect', 'yellowButtonEffect'];
  console.log('blueButtonEffect');

  //button effects 
  function buttonEffects() {

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

  // start the game
  function startGame() { // it has a bug if clicked twice!
    $(startButton).on('click', buttonEffects);
  };
  startGame();

  function changeColor() { 
    //some code here?
  }

});

I am trying a new approach in which I return all variables into an array and try to bring it back out of the function with this approach:

// In this sample I just bring the relevant part of the code:
//button effects 
  function buttonEffects() {

    //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);
    });
    return [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect];
  }
  var effects = buttonEffects();
  var blueButtonEffect = effects[0];
  var redButtonEffect = effects[1];
  var greenButtonEffect = effects[2];
  var yellowButtonEffect = effects[3];

  console.log(effects);
  // start the game
  function startGame() { // it has a bug if clicked twice!
    $(startButton).on('click', buttonEffects);
  };
  startGame();




  function changeColor() {
    //bodyBcg.style.backgroundColor = colors[2];
    let random = Math.floor(Math.random() * randomColors.length)

  }
1 Like
2

There’s a bunch of different directions you could go from here, but let’s start at the beginning: what are you trying to ultimately accomplish here?

1 Like
3

Hi @mmatthews1981.

So, I was trying to get these variables from the function buttonEffects() and I think I did it. Please, confirm whether this approach is correct. I return all the var into an object assigned to an item within its fnction. then I declared them out of the function with this approach:

function buttonEffects() {

    //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);
    });
    return {   //HERE
      item1: blueButtonEffect,
      item2: redButtonEffect,
      item3: greenButtonEffect,
      item4: yellowButtonEffect
      
    };
  }
  var effects = buttonEffects();
  var blueButtonEffect = effects.item1;
  var redButtonEffect = effects.item2;
  var greenButtonEffect = effects.item3;
  var yellowButtonEffect = effects.item4;

  console.log(yellowButtonEffect);
  // start the game
  function startGame() { // it has a bug if clicked twice!
    $(startButton).on('click', buttonEffects);
  };
  startGame();




  function changeColor() {
   //empty function
  }

});
4

Don’t tell me about your variables, tell me what this code is supposed to do on the screen. You’re trying to make the Simon buttons make their sounds when you click on them, right? Have you tested this in the browser yet?

5

You may have accomplished your goal., but there is certainly a better way of doing it. I think mmatthews is asking to help you go about your approach differently.

As for your attempt with using an array
return [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect];

const [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect] = buttonEffects();

Should have worked too.

6

Yes, they are working if I click them, I just need to get all of these effects out of the function to be able to use them again within another function. such as random flash display where players will follow clicking.

7

absolutely, I have tried this way but I did not know how to return the values. :sweat_smile:

8

The simplest way would be to not define them within the function. All you have to do is declare them within the scope of your document.ready, and they’ll be available for any function in that scope.

9

When using destructuring assignment with arrays, order matters., whereas with property keys do not.

10

So with your object example:

return {   
      blueButtonEffect,
      redButtonEffect,
      greenButtonEffect,
      yellowButtonEffect
 };

const { blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect }  = buttonEffects();

should also work.

11

I highly recommend you look into const / let / var and using destructuring assigment. Globals are evil.

1 Like
12

I would recommend linking us to the project. Weather you upload it to Github or you are building it on Codepen it would be best to see the full project.

13

Yes, sure! Here it is :

github: https://github.com/EliasOPrado/interactive-fronted-project

15

ok, I have sent the github link.

16

Now tag @kerafyrm02 and @mmatthews1981 so they can use those files to get a better idea of what is going on.

@Oliver_Olivier’s Simon project files: