首次尝试JS与HTML连接：颜色生成器按钮无响应求助

问题根源 #

1. DOM加载顺序错误：你在<head>中提前引入了color.js，此时页面的<button>元素还未渲染完成，document.getElementById("btn")会返回null，导致点击事件绑定失败。
2. 重复引入脚本：页面先后两次引入color.js，属于冗余操作。
3. 无效的onclick属性：按钮上标注了onclick="getRandomColor()"，但代码中未定义该函数，会造成逻辑混淆。

修复后的代码 #

调整后的HTML代码

<head>
    <link rel="stylesheet" href="color.css">
</head>
<body>
    <!--<h1 class="change"> I change <h1 class="c">C</h1><h1 class="o">O</h1>
        <h1 class="l">L</h1><h1 class="oo">O</h1><h1 class="r">
            R</h1><h1 class="s">S</h1></h1>-->
    <button id="btn">Click Me!</button>
    <script src="color.js"></script>
</body>
</html>

保持原JS代码不变

const btn = document.getElementById("btn");

btn.addEventListener("click", function(){
   alert("You clicked me");
})

说明 #

• 将脚本引入移到<body>末尾，确保脚本执行时页面所有DOM元素已加载完成，能正确获取按钮并绑定事件。
• 移除按钮上无效的onclick属性，避免无意义的函数调用提示。
• 删除<head>中重复的脚本引入。

现在点击按钮就能正常弹出提示框，后续可将alert替换为你需要的颜色生成逻辑。

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