This is my unique HTML file
<!DOCTYPE html>
<html>
<head>
<script src="ll.js"></script>
</head>
<body>
<link rel="stylesheet" href="home.css">
<h1><span>Customized</span> and <span>sortable</span> drop-down list</h1>
<form>
<input class="chosen-value" type="text" value="" placeholder="Type to filter">
<ul class="value-list">
<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>
The CSS is properly linked. 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');
}
});
I'm trying to figure out how to link them properly. I've attempted adding
<script src="ll.js"></script>
at different locations like within the form tag and body tag but it hasn't worked. When testing JS, HTML, and CSS on JsBin, everything functions perfectly except for linking the files together.