页面加载及点击按钮时随机背景色失效问题求助

我帮你排查出了两个导致背景色无法正常切换的小问题，咱们一步步来解决：

问题分析 #

• jQuery未引入却被使用：你在代码里用了$(document).ready()来初始化页面，但页面中没有引入jQuery库，浏览器会直接报错$ is not defined，导致初始化时的random_bg_color()函数根本没机会执行。
• 元素获取语法错误：用document.getElementById()查找按钮时，你加了#前缀——这个方法是直接通过元素的id属性值查找的，不需要加#，所以代码找不到目标按钮，点击事件自然绑定失败。

修复方案 #

1. 添加jQuery库引入：在其他脚本标签之前，先引入jQuery的CDN链接，确保$能正常被识别。
2. 修正按钮事件绑定：要么去掉getElementById参数里的#，要么用更简洁的jQuery方式绑定点击事件。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Random Quote Getter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  <style>
    #new-quote-btn { }
  </style>
</head>
<body translate="no" >
<div class='container-fluid'>
  <button id='new-quote-btn'>New Quote</button>
</div>
<!-- 先引入jQuery，确保$能正常使用 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.0.0/js/fontawesome-iconpicker.js'></script>
<script>
$(document).ready(function() {
  random_bg_color();
  // 用jQuery方式绑定点击事件更简洁直观
  $("#new-quote-btn").click(random_bg_color);
});

function random_bg_color() {
  var x = Math.floor(Math.random() * 256);
  var y = Math.floor(Math.random() * 256);
  var z = Math.floor(Math.random() * 256);
  var bgColor = "rgb(" + x + "," + y + "," + z + ")";
  console.log(bgColor);
  document.body.style.background = bgColor;
}
</script>
</body>
</html>

如果你不想用jQuery，也可以换成原生JS的初始化方式，这样连jQuery都不用引入：

window.onload = function() {
  random_bg_color();
  // 去掉#，直接用id值查找元素
  document.getElementById("new-quote-btn").addEventListener("click", random_bg_color);
};

这样修改后，页面加载时和点击按钮时，背景色都会正常随机切换啦！

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