Javascript not working when imported into html from js file?

Question

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.

did you try adding defer in you script? <script src="checkbox.js" defer></script> this usually makes you script to load once after your HTML is loaded — tajammul1996
– tajammul1996, Commented May 19, 2022 at 17:39

Pierre Demessence · Accepted Answer · 2022-05-19 17:56:05Z

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.

answered May 19, 2022 at 17:56

Pierre Demessence

5163 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Pradhan · Accepted Answer · 2022-05-19 18:03:14Z

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.

answered May 19, 2022 at 18:03

Ashish Pradhan

701 silver badge7 bronze badges

Comments

user10020689 · Accepted Answer · 2022-05-19 18:20:28Z

0

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

Make sure you load the JS file as the last element inside the body tag.
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.

answered May 19, 2022 at 18:20

user10020689

1

Collectives™ on Stack Overflow

Javascript not working when imported into html from js file?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related