samedi 22 mai 2021

Value from checkboxes not being returned

I have a couple of checkboxes that I'm trying to loop through and get the value of. However, my JS function is not returning the value when checking a box. I am very new to JS and would really appreciate any help! Code shown below:

<body>
    <script src="racquetObjects.js"></script>
    <div class="mainContainer">
      <div class="selectors">
        <form action="">
          <div class="brandName">
            <input type="checkbox" id="babolat" value="Babolat" />
            <label for="babolat">Babolat</label>
            <input type="checkbox" id="wilson" value="Wilson" />
            <label for="wilson">Wilson</label>
          </div>
          <div class="characteristics">
            <input type="checkbox" id="power" value="Power" />
            <label for="power">Power</label>
            <input type="checkbox" id="control" value="" />
            <label for="control">Control</label>
            <input type="checkbox" id="popular" value="" />
            <label for="popular">Popular</label>
          </div>
          <input type="submit" value="Find" id="search" />
        </form>
      </div>
      <div class="racquetContainer"></div>
      <div class="bench"></div>
    </div>
    <script src="racquetFinder.js"></script>
  </body>

const brandNameCB = document.querySelector(".brandName").children;

function isChecked() {
  for (var i = 0; i < brandNameCB.length; i++) {
    if (
      brandNameCB[i].tagName === "INPUT" &&
      brandNameCB[i].type === "checkbox"
    ) {
      if (brandNameCB[i].checked) {
        console.log(brandNameCB[i].value + " is Selected!);
      }
    }
  }
}



Aucun commentaire:

Enregistrer un commentaire