0

I have some code in a .js file that is used in checkboxes. When imported into the html, though, the first two checkbox sections work (location, pop) but the last one does not. When I have the js in the html instead of importing it, all three sections (location, pop, tuition) work... I'm not sure why this is or how to fix it! Sorry for the basic question.

HTML:

    <script src="checkbox.js"></script>

JS:

var allCheckboxes = document.querySelectorAll('input[type=checkbox]');
var allPlayers = Array.from(document.querySelectorAll('.school'));
var checked = {};

getChecked('pop');
getChecked('location');
getChecked('tuition');

Array.prototype.forEach.call(allCheckboxes, function (el) {
  el.addEventListener('change', toggleCheckbox);
});

function toggleCheckbox(e) {
  getChecked(e.target.name);
  setVisibility();
}

function getChecked(name) {
  checked[name] = Array.from(document.querySelectorAll('input[name=' + name + ']:checked')).map(function (el) {
    return el.value;
  });
}

function setVisibility() {
  allPlayers.map(function (el) {
    var pop = checked.pop.length ? _.intersection(Array.from(el.classList), checked.pop).length : true;
    var location = checked.location.length ? _.intersection(Array.from(el.classList), checked.location).length : true;
    var tuition = checked.tuition.length ? _.intersection(Array.from(el.classList), checked.tuition).length : true;
    if (pop && location && tuition) {
      el.style.display = 'block';
    } else {
      el.style.display = 'none';
    }
  });
}

The tuition does not change when checkboxes are selected.

lzzard
  • 43
  • 2

3 Answers3

2

Make sure the script is loaded at the bottom of your HTML document, or better, use the defer attribute so the script wait for the entire HTML to be ready before running.

Having the script being executed too early can make it try to manipulate HTML tags that are not yet ready.

For more information you can check this answer, which explains in details what happens when loading a script within an HTML page.

Pierre Demessence
  • 526
  • 3
  • 15
1

Instead of including the tag inside the head or at the starting of body, make sure you include your script in the bottom just above closing the tag which should look something like below. enter image description here

Ashish Pradhan
  • 60
  • 6
0

Can you show us the HTML code? You could try the following:

  1. Make sure you load the JS file as the last element inside the body tag.
  2. Try using 'defer' (as suggested above) or 'async' to see if the render cycle corrects and you see the JS in action on the third HTML tuition checkbox as well.
user10020689
  • 1