HTML页面无法调用JavaScript的startGame()函数问题排查

核心问题 #

点击按钮后看似无反应，是因为startGame()函数仅修改了变量，既没有将结果输出到控制台，也没有更新页面元素，导致你无法感知函数是否执行。同时当前代码存在可优化的加载逻辑问题。

具体修复步骤 #

1. 添加函数执行反馈：在startGame()函数内部添加控制台输出，直接验证函数是否触发
2. 同步页面内容：将修改后的message变量同步到页面的message-el元素中，让操作有视觉反馈
3. 优化脚本加载位置：把<script>标签移到<body>末尾，确保DOM完全加载后再执行JS，避免潜在的作用域问题

修改后的代码 #

HTML代码

<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <a href="index.js">Index.js</a>
    <h1>Blackjack</h1>
    <p id="message-el">Want to play a round?</p>
    <p>Cards:</p>
    <p>Sum:</p>
    <button onclick="startGame()">START GAME</button>
    
    <!-- 移到body末尾，确保DOM加载完成后执行JS -->
    <script src="index.js"></script>
</body>

JavaScript代码

let firstCard = 10
let secondCard = 1
let sum = firstCard + secondCard
let hasBlackJack = false
let isAlive = true
let message = ""

function startGame() {
    if (sum <= 20) {
        message = "Do you want to draw a new card?"
    } else if (sum === 21) {
        message = "Wohoo! You've got Blackjack!"
        hasBlackJack = true
    } else  {
        message = "You're out of the game!"
        isAlive = false
    }
    // 输出到控制台，确认函数执行状态
    console.log(message)
    // 更新页面提示文本，提供视觉反馈
    document.getElementById("message-el").textContent = message
}
console.log(message)
console.log(isAlive)

验证方法 #

启动Live Server后点击按钮，你会看到：

• 控制台输出对应的message内容
• 页面顶部的提示文本会根据sum的值动态变化

内容的提问来源于stack exchange，提问作者David Wigley