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

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

JavaScript function for converting timestamp to readable date

Executing Enter Key and Button Simultaneously with JavaScript: Step-by-Step Guide

Running a <script> tag with an external src attribute in a dynamic manner through the use of eval

Is it possible for Node.js to not automatically restart the server when modifying .js files?

Having trouble updating the value of my textfield in material-ui using formik

Error: Unable to retrieve the value of a null property | ReactJS |

There are no functions or classes returned when using NPM Link with the module

Transform an object into an array using JavaScript with the help of Lodash, Azure Functions, and Azure Logic Apps

Hover over a particular element using a loop in Vue.js

While it is possible to filter by friend.brand.id within friends in Angular, unfortunately the || undefined trick cannot be used to reset the filter when it is NULL

Ways to retrieve information from a URL using the .get() method in a secure HTTPS connection

Update Material-ui to include an inclusive Datepicker widget

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium

How can I add a character at a precise location while keeping the existing tags intact

Display a popup notification when clicking in Angular 2

Having trouble with installing Recharts through npm

Changing the theme of a toggle button in Jquery Mobile when the button is pressed

Issue: Access to sdcard/hello.mp3 file denied due to permission error (EACCES)

Is it a cookie-cutter function?