Unexpected javascript output

Question

I have a lot of table rows dynamically generated which generally take the form of the following

<td class="seatClass" >
    <label for="C" class="label-format" >
        <span > C0</span >
    </label >
    <input type = "checkbox" id = "C" name = "seats[US57][]" style = "display: inline-block;" value = "C"  class="terminalCheckbox" onchange = "parentNode.querySelector('span').classList.toggle('green');" />
</td>

Basically, my code displays a lot of labels and checkboxes in different rows. If X represents the checkbox, you can imagine something like this

LX IX DX JX
OX PX IX DX 
BX AX WX QX

Now sometimes these rows contain the same labels for instance I appears in both the first and second rows and the code for the two will almost be identical (because the values for their id's and names are dynamic).

Anyways, I am facing a weird problem. If you check a checkbox, I wanted its associated letter to turn green, hence the bit of javascript I added. This works fine. However, my problem is say I click on the letter I on the second row (not the checkbox). If I do this, the checkbox for the I in the first row gets checked and the I in the first row turns green. So checking a checkbox things work fine, but if I click a letter things are messed up.

Is there any reason looking at my code as to why this is happening? I have no other javascript on this, I can only think it is because labels and checkboxes are being replicated on other rows, but it still kind of confuses me as to why this would happen.

Thanks

Are the IDs being duplicated for entries with the same label? If so, the <label> elements for all checkboxes with the same ID will refer to the first such checkbox via their 'for' attributes. — radiaph
– radiaph, Commented Mar 25, 2015 at 21:41
That now makes sense. Made me look into something and have now sorted it, thanks. — Nick Price
– Nick Price, Commented Mar 25, 2015 at 21:52

ps2goat · Accepted Answer · 2015-03-25 21:47:45Z

Note that IDs have to be unique.

Instead of specifying the for attribute, wrap the input with the label. This makes it unnecessary to know the exact id of the nested control.

.green{
  color:green;
  }

<table>
  <tr>
<td class="seatClass" >
    <label class="label-format" >
        <span > C0</span >
   
    <input type="checkbox"  name="seats[US57][]" style="display: inline-block;" value="C"  class="terminalCheckbox" onchange="parentNode.classList.toggle('green');" />
       </label >
</td>
    </tr>
  <tr>
<td class="seatClass" >
    <label class="label-format" >
        <span > C0</span >
   <!-- note: change the onchange javascript to match the new layout.
       The label will now be the parent of the input. -->
    <input type="checkbox"  name="seats[US57][]" style="display: inline-block;" value="C"  class="terminalCheckbox" onchange="parentNode.classList.toggle('green');" />

       </label >
</td>
    </tr>
  </table>

Collectives™ on Stack Overflow

Unexpected javascript output

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related