如何在JavaScript中更改要应用于其他功能的按钮的颜色？

Question

I am trying to create a button effect into javascript to be called into another function. When the button is clicked it will display another colour then it will come back to its original state (colour). It could indeed be done with :active in css but I will not be able to use the effect into another function.

The final usage of the code is for the Simon game project in which will be randomly created sequences where players will follow.

I already have the sound played as well as changing the colour of each button but am not being able to bring back buttons to its original state (colour) after clicking.

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

$(btnBlue).click(function() {
    $(this).css('background-color', '#00FFFF');
    blueBtnAudio.play();
    if($(btnBlue).css('background-color') == '#00FFFF'){
      $(btnBlue).css('background-color', 'blue')
    }
  });

Answer 1

I suppose you want the button to change its color then come back to its original color when the sound is finished playing?

You can do this by two ways, first store the button's original color in a variable, then change its color and play the sound and finally set a timeout of 1 second then change the button's color to its original one like so :

 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"); $(btnBlue).click(function() { var originalColor = $(this).css('background-color'); $(this).css('background-color', '#00FFFF') var newColor = $(this).css('background-color'); if (originalColor != newColor) { blueBtnAudio.play(); setTimeout(function() { $(btnBlue).css('background-color', originalColor); }, 1000); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btnBlue"> btnBlue </button> 

or you can add an event listener for when the audio has ended playing and then applying your button its original color (this solution is better as it is dependent by the length of the audio and not the manual timeout we set in the first solution) :

 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"); $(btnBlue).click(function() { var originalColor = $(this).css('background-color'); $(this).css('background-color', '#00FFFF') var newColor = $(this).css('background-color'); if (originalColor != newColor) { blueBtnAudio.play(); blueBtnAudio.addEventListener('ended', function() { $(btnBlue).css('background-color', originalColor); }); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btnBlue"> btnBlue </button>