Multiple button onclick event

Question

Working on a site with multiple buttons, all I want the buttons to do it when you click on them change color. Example. Click button 1 and button 1 changes from white to yellow. Click on button 2 and button 2 changes from white to yellow. Right now I have onclick in the button code and it works, except it changes all the buttons at once.

$(document).ready(function() {
  $(".button").click(function() {
    $(".button").css('background', 'yellow');
  });
});

.button {
  background-color: #FFFFFF;
  /* White */
  border: 2px solid #f44336;
  color: black;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  border-radius: 50%;
  width: 60px;
  text-align: center;
  cursor: pointer
}

.disabled {
  background-color: #FF0000;
  /* Red */
  color: white;
  cursor: not-allowed;
}

.button-clicked {
  background-color: #FFFF00;
  /* Yellow */
}

td:not(:first-child) {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
}

<script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border=1>
  <tr>
    <td align="center"><button class="button" id="1" onclick="myFunction()">1</button></td>
    <td align="center"><button class="button" id="2" onclick="myFunction()">2</button></td>
    <td align="center"><button class="button" id="3" onclick="myFunction()">3</button></td>
  </tr>
</table>

Show us some code. Edit your question, click the `<>` button, or type Ctrl+M, and make a working example of the issue. It sounds like your click logic is looking up all the buttons to change, rather than using the element on the event to know which one to change. — Taplar, Feb 11 '19 at 19:01

cb64 · Accepted Answer · 2019-02-11T19:12:25.247

Heres a solution using the code you provided, you just need to change $(".button").css('background', 'yellow'); to $(this).css('background', 'yellow');

You can also remove onclick from your HTML.

While this is a working snippet with your code, others have provided better solutions to this problem.

<!DOCTYPE html>
<html>

<head>
  <script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".button").click(function () {
        $(this).css('background', 'yellow');
      });
    });
  </script>
  <style>
    .button {
      background-color: #FFFFFF;
      /* White */
      border: 2px solid #f44336;
      color: black;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 30px;
      border-radius: 50%;
      width: 60px;
      text-align: center;
      cursor: pointer
    }

    .disabled {
      background-color: #FF0000;
      /* Red */
      color: white;
      cursor: not-allowed;
    }

    .button-clicked {
      background-color: #FFFF00;
      /* Yellow */
    }

    td:not(:first-child) {
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 5px;
    }
  </style>
</head>

<body>
  <table width="100%" border=1>
    <tr>
      <td align="center"><button class="button" id="1">1</button></td>
      <td align="center"><button class="button" id="2">2</button></td>
      <td align="center"><button class="button" id="3">3</button></td>
</body>

</html>

Kamil Kiełczewski · Answer 2 · 2019-02-11T19:13:50.707

Try

function myFunction(event) {
    event.target.style="background: yellow";
}

<button class="button" id="1" onclick="myFunction(event)">1</button>
<button class="button" id="2" onclick="myFunction(event)">2</button>
<button class="button" id="3" onclick="myFunction(event)">3</button>

Or this (which is a little better because we not use onclick handler (more info here))

function myFunction(event) {
   event.target.style="background: yellow";
}

[...document.querySelectorAll('button')].map(x=>x.addEventListener('click',myFunction));

<button class="button" id="1">1</button>
<button class="button" id="2">2</button>
<button class="button" id="3">3</button>

added code that I am using. I have changed the id on all buttons. — RWRJR1985, Feb 11 '19 at 19:06

score 0 · Answer 3 · answered Feb 12 '19 at 15:56

0

Is there a way to onclick add text data to a table box? In the order it was pressed. Someone clicks button 3 the id info from button 3 goes into a different data box.

answered Feb 12 '19 at 15:56

RWRJR1985

3
3

Multiple button onclick event

3 Answers3