Click elsewhere and checkbox is ticked/unticked

Question

So I have a piece of code to create a table with some data in it. The first column contains checkboxes, other columns are just regular data.

What I want is that when I click anywhere on a random row (except for header), that entire row's background is turning into yellow (initially white) and the checkbox in that row is ticked. If I click again, everything in the row back to its normal (white row and unticked checkbox).

When I click right at the checkbox, everything acts as expected. However, when I click elsewhere, only the background is changed. I have checked the checked attribute of the checkbox and it is changed whenever I click (which is like normal). I don't know why this happens. I have looked through many posts with similar issues but it is not helped. I am only a beginner at Javascript and HTML. Please help me with this. Thank you very much!

function changeColorRow(number) {
  var elem = document.getElementsByTagName("tr")[number]
  var curr_check = document.getElementsByClassName("checkbox").checked
  if (!curr_check) {
    elem.style.backgroundColor = "yellow"
    document.getElementsByClassName("checkbox").checked = true
  } else {
    elem.style.backgroundColor = "white"
    document.getElementsByClassName("checkbox").checked = false
  }
}

<h1>List of companies</h1>
<table id="company">
  <tr>
    <th>Choose</th>
    <th>ID</th>
    <th>Company</th>
    <th>Website</th>
  </tr>
  <tr onclick="changeColorRow(1)">
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>ECOPRO Co., Ltd</td>
    <td>http://www.ecoprovn.com</td>
  </tr>
  <tr onclick="changeColorRow(2)">
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td>WAVINA.COM</td>
    <td>http://www.wavina.com</td>
  </tr>
</table>

Duplicate: [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — , Oct 09 '21 at 10:20
@ChrisG Thank you very much. I will look through that duplicate link and submit duplicate review later — JonnyJack, Oct 09 '21 at 10:36
It's not necessary to review anything, you used `document.getElementsByClassName("checkbox").checked` which won't work because `document.getElementsByClassName("checkbox")` returns a list of matching elements. — , Oct 09 '21 at 10:38
Oh right, thank you for pointing it out. Can I ask a small final question before closing this topic? When I set index to `document.getElementsByClassName("checkbox")` by adding `[number - 1]`, nothing happens when I click at the checkbox (just like other answers). Why is that? — JonnyJack, Oct 09 '21 at 10:46
It's because clicking the checkbox checks it, then your tr click handler unchecks it again. Even if you fix that, checking a box won't make the row yellow. See my fiddle for a way to do this. — , Oct 09 '21 at 10:59

DecPK · Accepted Answer · 2021-10-09T10:46:17.077

1

document.getElementsByClassName returns an array like structure, You have to use index to get that particular element at that index.

document.getElementsByClassName("checkbox")

You can get the index of the clicked row as

index = number - 1

const allCheckbox = document.getElementsByClassName("checkbox");

function changeColorRow(number) {
  const index = number - 1;
  var elem = document.getElementsByTagName("tr")[number]
  var curr_check = document.getElementsByClassName("checkbox")[index].checked

  if (!curr_check) elem.style.backgroundColor = "yellow"
  else elem.style.backgroundColor = "white"

  allCheckbox[index].checked = !allCheckbox[index].checked
}

[...allCheckbox].forEach(cb => {
  cb.addEventListener("change", (e) => changeColorRow(parseInt(e.target.dataset.index)))
})

tr {
  cursor: default;
  user-select: none;
}

<h1>List of companies</h1>
<table id="company">
  <tr>
    <th>Choose</th>
    <th>ID</th>
    <th>Company</th>
    <th>Website</th>
  </tr>
  <tr onclick="changeColorRow(1)">
    <td><input type="checkbox" class="checkbox" data-index="1"></td>
    <td>1</td>
    <td>ECOPRO Co., Ltd</td>
    <td>http://www.ecoprovn.com</td>
  </tr>
  <tr onclick="changeColorRow(2)">
    <td><input type="checkbox" class="checkbox" data-index="2"></td>
    <td>2</td>
    <td>WAVINA.COM</td>
    <td>http://www.wavina.com</td>
  </tr>
</table>

edited Oct 09 '21 at 10:46

answered Oct 09 '21 at 10:23

DecPK

24,537
6
26
42

When clicking an input, nothing happens – Oct 09 '21 at 10:30
Thanks for your help. It fixes my current issue. But now, when I click at checkboxes, nothing happens, even the checkbox is not ticked. This feature worked before. Can you review your code please? Thank you very much! – JonnyJack Oct 09 '21 at 10:31
Another broken snippet... also, this is a dupe. – Oct 09 '21 at 10:33
@ChrisG I agree it is dupe of `what does getElementsByClassName returns`, but this is not the only problem OP is facing. It is one of multiple problems – DecPK Oct 09 '21 at 10:47
That just means that the question needs to be edited, fixed or removed. Posting an answer suggests that this is a valid question. Helping OP is fine, but posting answers to bad questions will kill this website. Just post a comment instead, downvote, move on. – Oct 09 '21 at 10:49

Click elsewhere and checkbox is ticked/unticked

1 Answers1