Onclick function applied to multiple instances of same element type

Question

Javascript newb here.

I am trying to practice Javascript, and want to recreate something along the lines of what was done in this example: Change Button color onClick

However, I want this action to be applied to multiple "buttons" (inputs), so that anytime an individual button is clicked, that button and that button alone changes color.

I recreated the example above in such a way that I thought would accommodate multiple buttons, but clicking on any of them just changes the color of the first button.

It would be greatly appreciated if someone could explain/give an example of some buttons behaving independently.

score 0 · Answer 1 · answered Jun 17 '15 at 20:03

From taking a quick look at that example you should be able to change the color of any given button by doing this

<input type="button" id="button1" value = "button" style= "color:white" onclick="setColor('button1', '#101010')";/>

<input type="button" id="button2" value = "button" style= "color:white" onclick="setColor('button2', '#101010')";/>

Set color is taking in two parameters the first being the buttons ID. So we pass in each buttons unique ID to the function. In this case button1 and button2

score 0 · Answer 2 · answered Jun 17 '15 at 20:06

You need to use a this statement in your javascript. This will change the property of the element that was actually clicked on.

Here's an example:

var main = function () {        
    $('.button').click(function() {
        $(this).css('background-color' : 'red');
    });
};

Tomek Sułkowski · Accepted Answer · 2015-06-17T20:16:34.583

0

This will work:

with nice separation of concerns (you should avoid mixing javascript code with html)
without using external libraries (e.g. jQuery)

<html>
<head>
  <script>
    function init() {
      var buttons = document.querySelectorAll('input[type=button]');

      [].forEach.call(buttons, function(button) {
        button.addEventListener('click', function(e) {
          e.target.style.backgroundColor = e.target.getAttribute('data-color');
        });
      });

    }
  </script>
</head>

<body onload="init()">
  <input type="button" value="button" style="color:white" data-color="#101010" />
  <input type="button" value="button" style="color:white" data-color="#bada55" />
  <input type="button" value="button" style="color:white" data-color="#400400" />
</body>
</html>

edited Jun 17 '15 at 20:16

answered Jun 17 '15 at 20:10

Tomek Sułkowski

7,081
2
17
15

Awesome, and thank you- this is just about what I was looking for. I realize now that I forgot to mention that I also want the buttons to switch to their original color when clicked on again. I can't seem to format in any capacity in this comment, so I'll tell you what I did that I thought would work but did not... I added a conditional "if" statement to the the click function with the logic "if the button already has the data color attribute, change it's background to the original color". Is there a simple way to do this? – Jun 17 '15 at 21:04
Sure, you can check if `e.target.style.backgroundColor === ""` (empty string). If it is empty, that means no inline styling is applied. And the other way around: if you want to clear the inline styling, just set `e.target.style.backgroundColor = ""` ;) – Tomek Sułkowski Jun 17 '15 at 21:26

Onclick function applied to multiple instances of same element type

3 Answers3