Lesson 14: Passing Variables to Functions
Often times you want to give some information to a function when you call it. This is what you will learn in this lesson.
1. Change the background color of the buttons when they are clicked to show they are selected.
Now, clicking on the buttons selects them (changing their background color to a darker gray). However, the buttons are never deselected.
2. To deselect buttons, we just change the background color of all the buttons when one is clicked.
Now when a button is selected, the other buttons are deselected.
However, this method requires repitition of code. Code reduncancy should be avoided when possible to keep the code clean and concise.
3. Create a function to deselect all the buttons and call that function just before the line of code that selects a button in each function.
4. You can also call the function immediately when the page loads.
And remove the redundant code, background-color: silver; from the CSS for .iconButton.
Now, if we ever want to change the "deselected" color, we only need to do so in one place; the deselectAll() function.
5. To make the code even more concise, we can replace the selectRock(), selectPaper(), and selectScissors() with a single select() function.
If btnRock is clicked, the value of 'rock' is sent to the select() function and choice is equal to 'rock'. If btnPaper is clicked, the value of 'paper' is sent to select() and choice is equal to 'paper'. Likewise for btnScissors.
6. Once you have this working properly, comment out the alert() and use the value of choice to specify the image that should appear.
Now, with this single select() function all the buttons correctly change the src of imgPlayer.
7. Add the deselectAll() function call to deselect all the buttons, and then use if statements to determine which button to select.
8. Delete selectRock(), selectPaper(), and selectScissors() since you are no longer using them.
Now everything is working again, and with much less code.