无法 link html 与 JS 文件

Question

那是我的 html 文件

<!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 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>

我的 CSS link 已正确编辑。 JavaScript 文件 (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');
  }
});

我怎样才能link他们合适呢？我试过添加

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

在其他多个地方，例如在表单标签中，在正文标签中，但它不起作用。我在 JsBin 上测试了 JS，HTML 和 CSS 它工作得很好只是问题在于 link 将这些文件放在一起。

Answer 1

你可以，

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

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

所以基本上，您需要 defer 执行您的 javascript。

Answer 2

在 body 标记之前调用 javascript 文件，这将解决您的问题并且您应该将名称从 11.js 更改为 main.js 或者其他更好的名称

你的文件将是这样的

<!DOCTYPE html>
<html>
    <head>


    </head>
    <body>
        
        <h1><span>Styled</span> and <span>filterable</span> select dropdown</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>

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

Answer 3

原因是您的 JS 代码试图查询文档以定位某些元素。所以脚本应该在文档解析后运行。

在正文末尾链接您的 JS 文件解决了这个问题。您也可以使用 DOMContentLoaded 事件...因此脚本将在所有元素都存在后执行：

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

然后，你可以link你的JS文件在文档的头部。

无法 link html 与 JS 文件

Unable to link html with JS file

html

javascript

css

static-linking