求助：JavaScript外部文件无法关联HTML文档，嵌入可正常运行

问题出在JS代码执行时机过早：你把<script>标签放在<head>里，浏览器解析到这里时，<body>里的cards-container还没被渲染出来，document.getElementById('cards-container')会返回null，后续获取卡片元素的代码自然无法运行。而把代码直接嵌入<body>里时，代码是在DOM元素加载完成后才执行的，所以能正常工作。

下面是三种可行的解决方法：

方法1：将script标签移到body末尾（推荐新手） #

把引入JS的标签放到</body>之前，确保DOM完全加载后再执行JS：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>
<body>
  <div id="cards-container">
    <div class="card">A<div id="aceH">&#x2665;</div></div>
    <div class="card">K<div id=kingS>&#x2660;</div></div>
    <div class="card">Q<div id="queenC">&#x2663;</div></div>
    <div class="card">J<div id="jackH">&#x2665;</div></div>
  </div>
  <button onclick="shuffleCards()">Shuffle Cards</button>
  <button onclick="resetCards()">Reset Cards</button>
  <!-- 移到这里 -->
  <script src="script.js"></script>
</body>
</html>

方法2：给script标签添加defer属性 #

defer属性会告诉浏览器先加载DOM，等DOM解析完成后再执行JS代码，script标签可以留在head里：

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

方法3：在JS文件中监听DOM加载完成事件 #

把依赖DOM的代码包裹在DOMContentLoaded事件监听里，确保DOM加载后再执行：

var initialOrder = [];
var cardsContainer;

// 等待DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  cardsContainer = document.getElementById('cards-container');
  
  // 存储卡片初始顺序
  var cards = Array.from(cardsContainer.getElementsByClassName('card'));
  cards.forEach(function (card) {
    initialOrder.push(card);
  });
});

function shuffleCards() {
  if (!cardsContainer) return;
  cards = Array.from(cardsContainer.getElementsByClassName('card'));
  cards.forEach(function (card) {
    var randomPos = Math.floor(Math.random() * cards.length);
    cardsContainer.appendChild(card);
    cardsContainer.insertBefore(card, cards[randomPos]);
  });
}

function resetCards() {
  if (!cardsContainer) return;
  cards = Array.from(cardsContainer.getElementsByClassName('card'));
  cards.forEach(function (card, index) {
    cardsContainer.appendChild(card);
    cardsContainer.insertBefore(card, initialOrder[index]);
  });
}

内容的提问来源于stack exchange，提问作者Dennis Selfinger