未捕获的TypeError:无法读取null VSCODE的属性'querySelectorAll‘

Question

我正在使用Visual Studio代码。我正在尝试检查发牌盒是否可以添加和删除样本卡，但结果是这样的错误

script.js:226 Uncaught TypeError: Cannot read property 'querySelectorAll' of null at HTMLButtonElement.blackjackDeal (script.js:226)

以下是详细信息

<div class="container-5">
    <h2 id="change-my-id">Challenge 5: Blackjack</h2>
    <span id="blackjack-result">
        <h3>Let's Play

        </h3 >
    </span>
   
        <div class="flex-blackjack-row-1">
             <div id="your-box">
                    <h2>You: <span id="your-blackjack-result">0</span></h2>
                </div>
        
      
    
             <div class="dealer-box">
                   <h2>Dealer: <span id="dealer-blackjack-result">0</span> </h2>
               </div>
             </div>
        
    

    <div class="flex-blackjack-row-2">
        <div>
            <button class="btn btn-primary btn-lg mr-2" id="blackjack-hit-button">Hit</button>
            <button class="btn btn-warning btn-lg mr-2" id="blackjack-stand-button">Stand</button>
            <button class="btn btn-danger btn-lg mr-2" id="blackjack-deal-button">Deal</button>
        </div>
    </div>

    <div class="flex-blackjack-row-3">
            <table> 
                <tr>
                    <th>Wins</th>
                    <th>Loses</th>
                    <th>Draws</th>
                </tr>
                <tr>
                    <td><span id="wins">0</span></td>
                    <td><span id="loses">0</span></td>
                    <td><span id="draws">0</span></td>
                </tr>


            </table>

        </div>
    
</div>

   

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

JS脚本

let blackjackGame = {
  you: {
    scoreSpan: "#your-blackjack-result",
    div: "#your-box",
    score: 0,
  },
  dealer: {
    scoreSpan: "#dealer-blackjack-result",
    div: "#dealer-box",
    score: 0,
  },
};
function activePlayer() {
  const YOU = blackjackGame["you"];
  const DEALER = blackjackGame["dealer"];
}

const YOU = blackjackGame["you"];
const DEALER = blackjackGame["dealer"];

const hitSound = new Audio("sounds/swish.mp3");

document
  .querySelector("#blackjack-hit-button")
  .addEventListener("click", blackjackHit);

document
  .querySelector("#blackjack-deal-button")
  .addEventListener("click", blackjackDeal);

function blackjackHit() {
  showCard(YOU);
}

function showCard(activePlayer) {
  let cardImage = document.createElement("img");
  cardImage.src = "images/card-b-c3.png";
  document.querySelector(activePlayer["div"]).appendChild(cardImage);
  hitSound.play();
}

function blackjackDeal() {
  let yourImages = document.querySelector("#your-box").querySelectorAll("img");

  let dealerImages = document
    .querySelector("dealer-box")
    .querySelectorAll("img");

  //for Both Players
  //if you to remove all data gathered by both

  //for the player//

  for (i = 0; i < yourImages.length; i++) {
    yourImages[i].remove();
  }
  //for the dealer
  for (i = 0; i < dealerImages.length; i++) {
    dealerImages[i].remove();
  }
}

Answer 1

let dealerImages = document
    .querySelector("dealer-box")
    .querySelectorAll("img");

行document.querySelector("dealer-box")返回null，因为它没有找到匹配项。从您提供的html判断，您可能打算使用.dealer-box而不是dealer-box (因为.是类的css选择器)。

let dealerImages = document
    .querySelector(".dealer-box")
    .querySelectorAll("img");