Triggering a click event on various instances of a similar element type using the onclick function

Question

Triggering a click event on various instances of a similar element type using the onclick function

Hey there, I'm a newcomer to Javascript.

I've been practicing my Javascript skills and trying to replicate something similar to what was achieved in this example: Change Button color onClick

My goal is to have this functionality work for multiple "buttons" (inputs), so that when any button is clicked, only that specific button changes color.

I attempted to modify the example above to support multiple buttons, but unfortunately, clicking on any button simply changes the color of the first one.

If someone could provide an explanation or an example of how to make buttons behave independently, it would be incredibly helpful.

javascript html css input onclick

Answer 1

Answer №1

This solution is efficient:

It promotes a clear separation of concerns by avoiding the mixing of javascript code with html
There is no reliance on external libraries like jQuery

<html>
<head>
  <script>
    function initialize() {
      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="initialize()">
  <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>

Answer 2

This solution is efficient:

It promotes a clear separation of concerns by avoiding the mixing of javascript code with html
There is no reliance on external libraries like jQuery

<html>
<head>
  <script>
    function initialize() {
      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="initialize()">
  <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>

Answer 3

Answer №2

If you take a quick glance at the example provided, you'll see how easy it is to change the color of any button using this method:

<input type="button" id="btn1" value = "Button 1" style= "color:blue" onclick="changeColor('btn1', '#FF5733')";/>

<input type="button" id="btn2" value = "Button 2" style= "color:red" onclick="changeColor('btn2', '#FF5733')";/>

The function for changing colors requires two inputs - the ID of the button and the desired color value. So we specify the unique IDs (btn1 and btn2) for each button in this case.

Answer 4

If you take a quick glance at the example provided, you'll see how easy it is to change the color of any button using this method:

<input type="button" id="btn1" value = "Button 1" style= "color:blue" onclick="changeColor('btn1', '#FF5733')";/>

<input type="button" id="btn2" value = "Button 2" style= "color:red" onclick="changeColor('btn2', '#FF5733')";/>

The function for changing colors requires two inputs - the ID of the button and the desired color value. So we specify the unique IDs (btn1 and btn2) for each button in this case.

Answer 5

Answer №3

To accomplish this task in JavaScript, you must employ the `this` statement. This allows you to manipulate the specific element that triggered the event.

Check out the following demonstration:

var updateColor = function () {        
    $('.btn').click(function() {
        $(this).css('background-color', 'blue');
    });
};

Answer 6

To accomplish this task in JavaScript, you must employ the `this` statement. This allows you to manipulate the specific element that triggered the event.

Check out the following demonstration:

var updateColor = function () {        
    $('.btn').click(function() {
        $(this).css('background-color', 'blue');
    });
};

Triggering a click event on various instances of a similar element type using the onclick function

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve JSON Object using a string identifier

Using jQuery to load a text file and dynamically insert it into a specified div

Creating a personalized layout for your WordPress posts with custom card designs

Troubleshooting a Problem with CSS Div Multi-column Formatting

Tips for adjusting the Material UI Tabs indicator's position with react-scroller

Unable to download and install jspdf version 1.5.3

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

Utilizing JQuery to modify the element's id and trigger a function upon clicking

Adjusting the color of the legend on a LineChart in ExtJS 4 on-the-fly

Designing the autocomplete dropdown feature in Bootstrap UI

When attempting to use Ajax, the operation fails; however, if I directly access the URL,

The inclusion of float: left disrupts the formatting of the list

Maximizing PUT Methods in HTTP RESTful Services

Creating a route-guard in a Vue.js/Firebase authentication system for secure navigation

The functionality of RegExp is not as expected in this specific case, even though it works correctly in all

The basic evaluation of jQuery elements does not result in a comparison

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

Error: Trying to use 'setTimeout' before it has been initialized is not allowed

Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

``It seems like the Tailwind background image is not appearing on