CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RWRJR1985
RWRJR1985

Reputation: 3

Multiple button onclick event

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>

Upvotes: 0

Views: 592

Answers (3)

RWRJR1985
RWRJR1985

Reputation: 3

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.

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

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>

Upvotes: 0

cb64
cb64

Reputation: 855

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>

Upvotes: 1

Related Questions