How can I get multiple variables from a function in javascript

Question

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 botton 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?
  }

});

Now I am trying a new approach where I live each variable out of the function scope and declare only its var names within the function buttonEffects() to return the same startGame() effect.To be honest, I am pretty lost!

new approach:

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


  // start the game



function buttonEffects() {
  var blueButtonEffect;//something else shold be here....
  var redButtonEffect;
  var greenButtonEffect;
  var yellowButtonEffect;

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

});

Return an array of all the variables, or return an object with all the variables assigned to keys in that object. Pretty straight forward. — Taplar
– Taplar, Commented May 21, 2019 at 15:56
How would it be returning it as an array? KId of this way ``` return [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect]; ```? — Elias Prado
– Elias Prado, Commented May 21, 2019 at 16:12
I have tried this approach but is not appearing any outcome. var effects = buttonEffects(); var blueButtonEffect = effects[0]; var redButtonEffect = effects[1]; var greenButtonEffect = effects[2]; var yellowButtonEffect = effects[3]; — Elias Prado
– Elias Prado, Commented May 21, 2019 at 16:22

VirxEC · Accepted Answer · 2019-05-21 15:59:34Z

1

Return an object, like this:

function thing() {
    return {
        item1: 1,
        other: {
            item2: 2,
            item3: 3
        }
    };
}

var things = thing();
var item1 = things.item1;
var item2 = things.other.item2;
var item3 = things.other.item3;

answered May 21, 2019 at 15:59

VirxEC

1,08313 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elias Prado Over a year ago

Understood. I will try this approach. Thank you. ;)

VirxEC Over a year ago

Just glad to help!

Elias Prado · Accepted Answer · 2019-05-21 17:47:02Z

0

I find a way that may right if it is wrong please let me know.

  function buttonEffects(){

  var blueButtonEffect = code here;

  var redButtonEffect = code here;

  var greenButtonEffect = code here;

  var yellowButtonEffect = code here;

 return {
      item1: blueButtonEffect,
      item2: redButtonEffect,
      item3: greenButtonEffect,
      item4: yellowButtonEffect
    };
  }

  var effects = buttonEffects();
  var blueButtonEffect2 = effects.item1;
  var redButtonEffect2 = effects.item2;
  var greenButtonEffect2 = effects.item3;
  var yellowButtonEffect2 = effects.item4;

answered May 21, 2019 at 17:47

Elias Prado

1,8742 gold badges20 silver badges37 bronze badges

Collectives™ on Stack Overflow

How can I get multiple variables from a function in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related