How do I change what a JS function does when called by different buttons?

Question

I am learning Javascript and I'm trying to clean up my code. The code is pretty simple: it simply changes the color of some text by clicking some different buttons. When you click the red button the text turns red, the blue button the text turns blue, etc. Here is the code:

HTML:

<h1 id="title">Change my color!</h1>

<button id="btn" onclick="colorRed()">Red</button>
<button id="btn" onclick="colorGreen()">Green</button>
<button id="btn" onclick="colorBlue()">Blue</button>
<button id="btn" onclick="colorBlack()">Black</button>

Javascript:

var title = document.getElementById("title");

function colorRed() {
  title.style.color = "red";
}

function colorGreen() {
  title.style.color = "green";
}

function colorBlue() {
  title.style.color = "blue";
}

function colorBlack() {
  title.style.color = "black";
}

This code works. My question is how do I clean up my Javascript; in a case where I would've had 20 buttons, coding 20 different functions would obviously not be the way to go.

I did try the following for every single color, but that didn't work:

Javascript:

var title = document.getElementById("title");

var btn = document.getElementById("btn");

function changeColor() {
  if(btn.innerHTML == "Red") {
    title.style.color = "red";
  } else if ...
}

I think it goes wrong when I try to identify which button has been clicked by seeing if their inner HTML is equal to a certain color, but I'm not sure how to fix that. Help would be much appreciated!

EDIT: My question isn't a duplicate of Change an element's background color when clicking a different element as the code I wrote works already, and I just want to learn how to clean it up.

Answer 1

Might be easiest to just make one changeColor function and pass it a color in the event:

var title = document.getElementById("title");

function changeColor(color) {
   console.log(color);
   title.style.color = color;
}

<h1 id="title">Change my color!</h1>

<button class="btn" onclick="changeColor('red')">Red</button>
<button class="btn" onclick="changeColor('green')">Green</button>
<button class="btn" onclick="changeColor('blue')">Blue</button>
<button class="btn" onclick="changeColor('black')">Black</button>

Side note: you really shouldn't repeat id's and should use class instead.

It is generally not advisable to use inline event handlers, use addEventListener instead. Rather than adding an event listener for each element, I would recommend adding a common parent element, attaching one event listener to that and inspect the event ("event delegation") to determine which color to apply:

var title = document.querySelector('#title');

document.querySelector('#button-container').addEventListener('click', function(event) {
   var color = event.target.getAttribute('data-color')
   title.style.color = color;
}, false)

<h1 id="title">Change my color!</h1>
<div id="button-container">
  <button data-color="red">Red</button>
  <button data-color="green">Green</button>
  <button data-color="blue">Blue</button>
  <button data-color="black">Black</button>
</div>

Answer 2

Don't use inline HTML event attributes, such as onclick. There are a variety of reasons why and if you are just starting with JavaScript, you don't want to pick up any bad habits. Instead, keep your JavaScript completely separate from your HTML and follow modern standards using the .addEventListener() JavaScript method for setting up event handlers.

Also, id values must be unique within a document (the whole point of them is to uniquely identify elements). To be able to group just the buttons that relate to this operation, you can give them all the same CSS class and then query on that class in JavaScript (shown below).

Next, you only need one function, but if your individual buttons were storing the color they should produce, that one function could extract it and use it without the need for any arguments to be passed to your function:

var title = document.getElementById("title");

// When you query your document for groups of matching elements (using methods
// like: getElementsByTagName or getElementsByClassName) you get back an object
// that is similar to an array, called a "node list". Although these "array-like"
// objects support some of the standard array object's features, they are not
// true arrays and don't implement many of the powerful array methods out there.

// But, we can convert the node list returned from .querySelectorAll into an array
// and then we can iterate the array with .forEach() looping method later.
var buttonArray = Array.prototype.slice.call(document.querySelectorAll(".colorBtn"));

// Loop through the button array (the function provided as an argument will be 
// executed for each element in the array)
buttonArray.forEach(function(button){
  
  // Set up click event handlers for each button
  button.addEventListener("click", function(){
    // Just set the color to the "data-color" attribute value on the element
    title.style.color = button.dataset.color;
  })

});

.colorBtn {
  box-shadow:2px 2px 1px grey;
  border-radius:4px; 
  width:100px;
  display:inline-block;
  margin:4px; 
}

.colorBtn:hover, .colorBtn:active {
  box-shadow:-2px -2px 1px #e0e0e0;
  outline:none;
}

<h1 id="title">Change my color!</h1>

<!-- Putting related elements into the same class allows you to
     not only style them identically, but also find them in 
     JavaScript more easily. -->
<button id="btn1" class="colorBtn" data-color="red">Red</button>
<button id="btn2" class="colorBtn" data-color="green">Green</button>
<button id="btn3" class="colorBtn" data-color="blue">Blue</button>
<button id="btn4" class="colorBtn" data-color="black">Black</button>

Answer 3

Another way to do this is the following:

function changeColor() {
    title.style.color = btn.style.backgroundColor;
}

and set each buttons background to the appropriate color.

Answer 4

Rather than have the function figure out what color to change to, you could pass that color to the changeColor function. Your function would become:

function changeColor(color) {
    title.style.color = color;
}

Then in your HTML, you would change the onclick properties to pass that in:

<button id="btn" onclick="changeColor('red')">Red</button>
...

Also, I wanted to mention that your issues before weren't just related to checking the innerHTML like you suggested in your post. One issue would be that you have multiple HTML elements with the same id. That isn't going to work well when using document.getElementById().

Answer 5

When you need a dynamic number of elements, we need an easy way to find them in the DOM. There are some helper methods out there, like getElementsByClassName() on the document object. The first thing I would do is drop the IDs on your buttons (which should be unique, by the way), in favor of a class name:

<button class="btn" onclick="colorRed()">Red</button>
<button class="btn" onclick="colorGreen()">Green</button>
<button class="btn" onclick="colorBlue()">Blue</button>
<button class="btn" onclick="colorBlack()">Black</button>

The second thing I would do is refactor this so that you can use good unobtrusive JavaScript practices (basically getting the JavaScript good out of the HTML markup and wiring it up all in a JavaScript code block). First, we need a way for the JavaScript to know which color you want to change the button text to. Let's introduce a custom HTML data- attribute in place of the hard-coded onclick handlers:

<button class="btn" data-color="red">Red</button>
<button class="btn" data-color="green">Green</button>
<button class="btn" data-color="blue">Blue</button>
<button class="btn" data-color="black">Black</button>

Now, we need a way to find these buttons so we can loop over them and apply an onclick handler. This can be done with the method I mentioned earlier:

var title = document.getElementById("title");
var buttons = document.getElementsByClassName("btn");

This will build you an array of the four buttons (or however many you have).

Then we need to loop over them and assign a click handler that retrieves the color from the data-color attribute and assigns it to the <h1> element's style.color property:

for (var btnIndex = 0; btnIndex < buttons.length; btnIndex++)
{
    buttons[btnIndex].onclick = function() {
        title.style.color = this.getAttribute('data-color');
    }
}

And that's it! We eliminated all of the duplicate and practiced some better JavaScript techniques at the same time. Try the code out below:

var title = document.getElementById("title");
var buttons = document.getElementsByClassName("btn");

for (var btnIndex = 0; btnIndex < buttons.length; btnIndex++)
{
    buttons[btnIndex].onclick = function() {
        title.style.color = this.getAttribute('data-color');
    }
}

<h1 id="title">Change my color!</h1>

<button class="btn" data-color="red">Red</button>
<button class="btn" data-color="green">Green</button>
<button class="btn" data-color="blue">Blue</button>
<button class="btn" data-color="black">Black</button>