Unable to link html with JS file-CodePudding

That's my html file

<!DOCTYPE html>
<html>
    <head>
        <script src="ll.js"></script>

    </head>
    <body>
        <link rel="stylesheet" href="home.css">
        
        <h1><span>Styled</span> and <span>filterable</span> select dropdown</h1>

        <form>
            <input  type="text" value="" placeholder="Type to filter">
            <ul >
              <li>Alabama</li>
              <li>Alaska</li>
              <li>Arizona</li>
              <li>Arkansas</li>
              <li>California</li>
              <li>Colorado</li>
              <li>Connecticut</li>
              <li>Delaware</li>
              <li>Florida</li>
              <li>Georgia</li>
              <li>Hawaii</li>
              <li>Idaho</li>
              <li>Illinois</li>
              <li>Indiana</li>
              <li>Iowa</li>
              <li>Kansas</li>
              <li>Kentucky</li>
              <li>Louisiana</li>
              <li>Maine</li>
              <li>Maryland</li>
              <li>Massachusetts</li>
              <li>Michigan</li>
              <li>Minnesota</li>
              <li>Mississippi</li>
              <li>Missouri</li>
              <li>Montana</li>
              <li>Nebraska</li>
              <li>Nevada</li>
              <li>New Hampshire</li>
              <li>New Jersey</li>
              <li>New Mexico</li>
              <li>New York</li>
              <li>North Carolina</li>
              <li>North Dakota</li>
            </ul>
          </form>


</body>
</html>

My CSS is linked properly. JavaScript file (ll.js):

const inputField = document.querySelector('.chosen-value');
const dropdown = document.querySelector('.value-list');
const dropdownArray = [... document.querySelectorAll('li')];
console.log(typeof dropdownArray)
dropdown.classList.add('open');
inputField.focus(); // Demo purposes only
let valueArray = [];
dropdownArray.forEach(item => {
  valueArray.push(item.textContent);
});

const closeDropdown = () => {
  dropdown.classList.remove('open');
}

inputField.addEventListener('input', () => {
  dropdown.classList.add('open');
  let inputValue = inputField.value.toLowerCase();
  let valueSubstring;
  if (inputValue.length > 0) {
    for (let j = 0; j < valueArray.length; j  ) {
      if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) {
        dropdownArray[j].classList.add('closed');
      } else {
        dropdownArray[j].classList.remove('closed');
      }
    }
  } else {
    for (let i = 0; i < dropdownArray.length; i  ) {
      dropdownArray[i].classList.remove('closed');
    }
  }
});

dropdownArray.forEach(item => {
  item.addEventListener('click', (evt) => {
    inputField.value = item.textContent;
    dropdownArray.forEach(dropdown => {
      dropdown.classList.add('closed');
    });
  });
})

inputField.addEventListener('focus', () => {
   inputField.placeholder = 'Type to filter';
   dropdown.classList.add('open');
   dropdownArray.forEach(dropdown => {
     dropdown.classList.remove('closed');
   });
});

inputField.addEventListener('blur', () => {
   inputField.placeholder = 'Select state';
  dropdown.classList.remove('open');
});

document.addEventListener('click', (evt) => {
  const isDropdown = dropdown.contains(evt.target);
  const isInput = inputField.contains(evt.target);
  if (!isDropdown && !isInput) {
    dropdown.classList.remove('open');
  }
});

How can I link they properly? I have tried adding

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

at multiple other places like in form tag, in body tag but it doesn't work. I tested JS, HTML and CSS on JsBin it works perfectly just the problem is in linking these files together.

CodePudding user response：

Either you can ,

Add after `<body> ..</body><script>...` ends. or 

<script src='ll.js' defer></script>

So basically, you need to defer the execution of your javascript.

CodePudding user response：

Call javascript file before body tag that will solve your problem and you should change name from 11.js to main.js or something else that's will be much better

your file will be like this

<!DOCTYPE html>
<html>
    <head>


    </head>
    <body>
        
        <h1><span>Styled</span> and <span>filterable</span> select dropdown</h1>

        <form>
            <input  type="text" value="" placeholder="Type to filter">
            <ul >
              <li>Alabama</li>
              <li>Alaska</li>
              <li>Arizona</li>
              <li>Arkansas</li>
              <li>California</li>
              <li>Colorado</li>
              <li>Connecticut</li>
              <li>Delaware</li>
              <li>Florida</li>
              <li>Georgia</li>
              <li>Hawaii</li>
              <li>Idaho</li>
              <li>Illinois</li>
              <li>Indiana</li>
              <li>Iowa</li>
              <li>Kansas</li>
              <li>Kentucky</li>
              <li>Louisiana</li>
              <li>Maine</li>
              <li>Maryland</li>
              <li>Massachusetts</li>
              <li>Michigan</li>
              <li>Minnesota</li>
              <li>Mississippi</li>
              <li>Missouri</li>
              <li>Montana</li>
              <li>Nebraska</li>
              <li>Nevada</li>
              <li>New Hampshire</li>
              <li>New Jersey</li>
              <li>New Mexico</li>
              <li>New York</li>
              <li>North Carolina</li>
              <li>North Dakota</li>
            </ul>
          </form>

          <script src="main.js"></script>
</body>
</html>

CodePudding user response：

The reason is your JS code is attempting to query the document to target some elements. So the script should run after the document is parsed.

Linking your JS file at the end of the body solved the issue. You could also have used the DOMContentLoaded event... So the script would execute after all elements are present:

document.addEventListener("DOMContentLoaded", function(){
  // Your script
})

And then, you can link your JS file in the head of the document.