Running different sets of elements through same function

Question

I'm trying to make a mini survey and I want the buttons to change color as I click them, and go back to clear when a different button in the same question has been selected. It currently changes the button I click to red, and leaves the rest clear, but clicking any other button, whether in that question or the next, changes all buttons back to clear. I'm a beginner so a clear explanation would be much appreciated.

function changeColor(id) {
  var tabs = document.getElementsByClassName('btn')
  for (var i = 0; i < tabs.length; ++i) {
    var item = tabs[i];
    item.style.backgroundColor = (item.id == id) ? "red" : "";
  }
}

.btn {
  width: 100%;
  height: 100%;
}

<div class="background1 ">
  <div class="transbox ">
    <h3 align="center ">Q1. Disagreeing with a friend on preferences.</h3>
    <table border="1 ">
    </table>
    <table id="table1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab1 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Slightly likely " button id="tab2 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab3 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab4 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Likely " button id="tab5 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Very likely " button id="tab6 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab7 " class="btn " onClick="changeColor(this.id) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div class="background2 ">
  <div class="transbox ">
    <h3 align="center ">Q2. Betting a day's income on horse racing.</h3>
    <table border="1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab8 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Slightly likely " button id="tab9 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab10 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab11 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Likely " button id="tab12 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Very likely " button id="tab13 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab14 " class="btn " onClick="changeColor(this.id) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

You're problem is that all buttons had the class name of "btn".

Here's a solution that adds a class names to the input based on the table they're in and binds an onclick programmatically. Check out the Fiddle

Here's the JavaScript I used:

var allbtns = document.getElementsByClassName("btn");

for (var i = 0; i < allbtns.length; i++) {
  var btn = allbtns[i];
  btn.onclick = function() {

    if (this.classList.contains('q1Button')) {
      var q1btns = document.getElementsByClassName('q1Button')
      for (var i = 0; i < q1btns.length; ++i) {
        var item = q1btns[i];
        item.style.backgroundColor = (item.id == this.id) ? "red" : "";
      }
    }

    if (this.classList.contains('q2Button')) {
      var q2btns = document.getElementsByClassName('q2Button')
      for (var i = 0; i < q2btns.length; ++i) {
        var item = q2btns[i];
        item.style.backgroundColor = (item.id == this.id) ? "red" : "";
      }
    } 

  }
}

Answer 2

Don't loop through all elements with the btn class. Find the table containing the current button, and just loop through the buttons in the same table.

Also, rather than passing this.id to the function, just pass this.

function changeColor(button) {
  var table = button.parentElement.parentElement.parentElement;
  var tabs = table.querySelectorAll(".btn");
  for (var i = 0; i < tabs.length; ++i) {
    var item = tabs[i];
    item.style.backgroundColor = (item == button) ? "red" : "";
  }
}

.btn {
  width: 100%;
  height: 100%;
}

<div class="background1 ">
  <div class="transbox ">
    <h3 align="center ">Q1. Disagreeing with a friend on preferences.</h3>
    <table border="1 ">
    </table>
    <table id="table1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab1 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Slightly likely " button id="tab2 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab3 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab4 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Likely " button id="tab5 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Very likely " button id="tab6 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab7 " class="btn " onClick="changeColor(this) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div class="background2 ">
  <div class="transbox ">
    <h3 align="center ">Q2. Betting a day's income on horse racing.</h3>
    <table border="1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab8 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Slightly likely " button id="tab9 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab10 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab11 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Likely " button id="tab12 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Very likely " button id="tab13 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab14 " class="btn " onClick="changeColor(this) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>