1

I want to make a counter that shows how many checkboxes are in the checkbox list in the html page. My code is as below. The counter that I show in HTML is not updated, why?

I may not be able to capture the checkbox value in the if block.

var clicks = 0;



function checkboxes() {
  var inputElems = document.getElementsByTagName("input"),


    for (var i = 0; i < inputElems.length; i++) {
      if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
      } else {
        clicks -= 1;
        document.getElementById("clicks").innerHTML = clicks;
      }

    }
}
<div class="addto-playlists">
  <ol>


    <li>
      <label for="random-1" class="playlist-name">
                    <input id="random-1" type="checkbox" name="mycheckbox" value=578080>
                    xxxx
                </label>
    </li>
    <li>
      <label for="random-1" class="playlist-name">
                    <input id="random-1" type="checkbox" name="mycheckbox" value=1234>
                    xxxx
                </label>
    </li>
    <li>
      <label for="random-1" class="playlist-name">
                    <input id="random-1" type="checkbox" name="mycheckbox" value=567>
                    xxxx
                </label>
    </li>
  </ol>
</div>
<p>clicks: <a id="clicks">0</a></p>
ikiK
  • 6,328
  • 4
  • 20
  • 40
Apple
  • 65
  • 6
  • The code is invoked at page load time but not when a click event happens, to trigger on a click event, take a look at [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) – Paul S. Dec 30 '21 at 21:09
  • Also, for thoroughness; your current code has a syntax error due to the `var inputElems` line ending with a comma `,` rather than a semicolon `;`, and your HTML has duplicate `id` attributes, where an ID should always be unique on a whole page – Paul S. Dec 30 '21 at 21:12

1 Answers1

1
  1. Seems you haven't called checkboxes() method.
  2. The logic you've written seems to be wrong. Here is the working solution

document.getElementById("checkbox-list").addEventListener("click", checkboxes);

function checkboxes() {
  var inputElems = document.getElementsByTagName("input");
  var clicks = 0;
  for (var i = 0; i < inputElems.length; i++) {
    if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
      clicks += 1;
    }
    document.getElementById("clicks").innerHTML = clicks;

  }
}
<div class="addto-playlists">
  <ol id="checkbox-list">


    <li>
      <label for="random-1" class="playlist-name">
                    <input id="random-1" type="checkbox" name="mycheckbox" value=578080>
                    xxxx
                </label>
    </li>
    <li>
      <label for="random-1" class="playlist-name">
                    <input id="random-2" type="checkbox" name="mycheckbox" value=1234>
                    xxxx
                </label>
    </li>
    <li>
      <label for="random-1" class="playlist-name">
                    <input id="random-3" type="checkbox" name="mycheckbox" value=567>
                    xxxx
                </label>
    </li>
  </ol>
</div>
<p>clicks: <a id="clicks">0</a></p>
Ganesh Babu
  • 3,590
  • 11
  • 34
  • 67