適用於 codepen.io，但不適用於 Visual Code Studio？

Question

這行代碼在 codepen.io 中有效，但在 Visual Code Studio 中無效。 當我打開一個 html 文件並鏈接到 chrome 中的 js 時，錯誤顯示我的 var nav 是 null，但是當我使用 codepen.ZF98ED07A4D5F50F477DE1410D905FZ 中的代碼時。 該代碼有效。 當您單擊時，我試圖讓側邊欄出現和消失

let nav = document.querySelector('nav')
function toggleNav() {
  if (nav.classList.contains('is-open')) {
    nav.classList.remove('is-open')
  } else {
    nav.classList.add('is-open')
  }
}

這是hmtl：

<button onclick="toggleNav()"> Click me for side bars </button>
<nav class="" >
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>        
</nav>

如果你想看看什么是開放的，這里是 css：

body {overflow:hidden}
a {
    border-width: 2px 4px 2px 4px ;
    text-decoration: none;
    margin: 0px;
    margin-top: 10px;
    padding: 5px;
    display: block;
    width: auto;
    height: 30px;
    border: solid brown;
    color: brown;
    background-color: darkgrey;
    margin: 0px;
}

.is-open {
    transform: translateX(-300px);
}

Answer 1

嘗試像這樣將其添加到 function ！

function toggleNav() {
  let nav = document.querySelector('nav')
  if (nav.classList.contains('is-open')) {
    nav.classList.remove('is-open')
  } else {
    nav.classList.add('is-open')
  }
}

或者
只需在頁面底部添加 JS。 當您的 Js 代碼將被執行時，它會尋找“導航”，而當您的頁面剛剛開始加載時，它將無法找到它。

檢查此答案以獲取更多詳細信息： https://stackoverflow.com/a/1829934/3995126