Javascript using getElementByClassName to change button colour

Question

I am new to javascript and trying to write a javascript code so when a button is clicked its colour will change. I tried different ways but when clicked on the first element works. Not really sure what is going on here. I would appreciate any help.

var count = 1;
        function setColor(button, color) {
          var property = document.getElementsByClassName("button");
          if (count == 0) {
            property.style.backgroundColor = "#A94E3B"
            count = 1;
          }
          else {
            property.style.backgroundColor = "#EAE8E8"
            count = 0;
          }
        }

this is plural ! **getElement** **s** **ByClassName** event if therz is only one element in this collection — Mister Jojo, Dec 19 '20 at 03:54
Duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return). — Sebastian Simon, Dec 22 '20 at 04:15

score 0 · Answer 1 · answered Dec 19 '20 at 03:08

To get the reference to the current button, use the this keyword as a parameter value in the function call added inside your onclick attribute. Then use that reference to change the color.

Example:

var count = 1;

function setColor(e, color) {
  e.style.backgroundColor = color;
}

<html>

<head>
  <script>
  </script>
</head>

<body>
  <p> Click a button to change its color and click again to reset! </p>
  <table class="table table-bordered table-responsive-md table-striped text-center">
    <thead>
      <tr>
        <th class="text-center">My items:</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td contenteditable="true">Item 1</td>
        <td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
      </tr>
      <tr>
        <td contenteditable="true">Item 2</td>
        <td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
      </tr>
      <tr>
        <td contenteditable="true">Item 3</td>
        <td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
      </tr>
      <tr class="hide">
        <td contenteditable="true">Item 4</td>
        <td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
      </tr>
      <tr>
        <td contenteditable="true">Item 5</td>
        <td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Mister Jojo · Accepted Answer · 2020-12-19T04:15:26.830

this way, with event delegation and classList toggle

const myTable = document.getElementById('my-table')

myTable.onclick = e =>
  {
  if (!e.target.matches('#my-table button')) return
  e.target.classList.toggle('orange')
  }

#my-table button {
  background-color : yellow;
  }
#my-table button.orange {
  background-color : orange;
  }
  
table {
  border-collapse : collapse;
  }
table th,
table td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  text-align : center;
  }
table thead {
  background-color : #c3e3ee;
  }
  
table td:first-of-type {
  width : 8em;
  }

<p> Click a button to change its color and click again to reset! </p>

<table id="my-table">
  <thead>
    <tr> <th colspan="2" >My items:</th> </tr>
  </thead>
  <tbody>
    <tr> <td contenteditable="true">Item 1</td> <td> <button>STATUS</button></td> </tr>
    <tr> <td contenteditable="true">Item 2</td> <td> <button>STATUS</button></td> </tr>
    <tr> <td contenteditable="true">Item 3</td> <td> <button>STATUS</button></td> </tr>
    <tr> <td contenteditable="true">Item 4</td> <td> <button>STATUS</button></td> </tr>
    <tr> <td contenteditable="true">Item 5</td> <td> <button>STATUS</button></td> </tr>
   </tbody>
</table>

Javascript using getElementByClassName to change button colour

2 Answers2