Запуск разных наборов элементов через одну и ту же функцию

Question

Я пытаюсь сделать мини-опрос, и я хочу, чтобы кнопки меняли цвет при нажатии на них, и возвращаюсь, чтобы очистить, когда была выбрана другая кнопка в том же вопросе.В настоящее время она меняет кнопку, которую я нажимаю, на красную, а остальное остается прозрачной, но при нажатии любой другой кнопки, будь то в этом или следующем вопросе, все кнопки возвращаются к очистке.Я новичок, поэтому очень хотелось бы получить четкое объяснение.

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

Ваша проблема в том, что все кнопки имели имя класса "btn".

Вот решение, которое добавляет имена классов к входу на основе таблицы, в которой они находятся, и программно связывает нажатие кнопки мыши.,Проверьте Fiddle

Вот JavaScript, который я использовал:

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

Не перебирать все элементы с классом btn.Найдите таблицу, содержащую текущую кнопку, и просто прокрутите кнопки в той же таблице.

Кроме того, вместо передачи this.id в функцию, просто передайте 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>