CODEWITHSUNDEEP
javascripthtml
lzzard
lzzard

Reputation: 53

Javascript not working when imported into html from js file?

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.

Upvotes: 0

Views: 6481

Answers (3)

user10020689
user10020689

Reputation: 1

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.

Upvotes: 0

Ashish Pradhan
Ashish Pradhan

Reputation: 80

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

Upvotes: 1

Pierre Demessence
Pierre Demessence

Reputation: 516

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.

Upvotes: 2

Related Questions