Dash课程项目5 checkpoint3：点击按钮生成随机背景色求助

我正在学习Dash课程的项目5 checkpoint3，目前陷入了困境。课程要求我实现一个点击按钮即可生成随机背景色的CSS功能。

这个项目本身还不错，但除了这类论坛外我没有其他指导渠道。

<!DOCTYPE html>

<head>
<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.js"></script>
<style>

body {
  background-color: #fff; /* 替换原无效的var()，设置默认白色背景 */
}

.beep {
  width: 5px;
  height: 0;
  border: 5px solid transparent;
  border-top: 10px solid #777;
  border-bottom: 80px solid #888;
  position: relative;
  left: 140px;
}

@keyframes blink {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
  }
}
@-webkit-keyframes blink {
  50% {
    background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5;
  }
}
@-moz-keyframes blink {
  50% {
    background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5;
  }
}
.laser {
  animation: blink .5s infinite;
  -webkit-animation: blink .5s infinite;
  -moz-animation: blink .5s infinite;
}
.brain {
  background: radial-gradient(circle, white 15%, transparent 40%), #cc5;
  background: -moz-radial-gradient(circle, white 15%, transparent 40%), #cc5; 
  background: -webkit-radial-gradient(circle, white 15%, transparent 40%), #cc5;
  background-size: 75px 150px;
  height: 150px;
  width: 150px;
  border-radius: 60px 60px 10px 10px;
  border-bottom: 40px solid #666;
  position: relative;
  left: 70px;
}
.torso {
  height: 0;
  width: 140px;
  border-top: 300px solid #bc6;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-radius: 20px 20px 100px 100px;
}
.left {
  font-family: 'Poller One', verdana, arial, sans-serif;
  font-weight: bold;
  font-size: 250px;
  color: #666;
  transform: rotate(200deg);
  -webkit-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  position: relative;
  top: -320px;
  left: -190px;
  z-index: -1;
}
.right {
  font-family: 'Poller One', verdana, arial, sans-serif;
  font-weight: bold;
  font-size: 250px;
  color: #666;
  transform: scaleY(-1) rotate(20deg);
  -webkit-transform: scaleY(-1) rotate(20deg);
  -moz-transform: scaleY(-1) rotate(20deg);
  position: relative;
  top: -620px;
  left: 190px;
  z-index: -1;
}
.foot {
  height: 40px;
  width: 40px;
  background: #ccc;
  border-radius: 40px;
  border: 15px solid #999;
  position: relative;
  left: 110px;
  top: -10px;
  z-index: -1;
}
</style>
</head>

<body>

<div class="robot">
  <div class="beep"></div>
  <div class="brain"></div>
  <div class="torso">
    <div class="left">j</div>
    <div class="right">j</div>
  </div>
  <div class="foot"></div>
</div>

<button class="flash">laser eyes on/off</button>
<button class="color">change color!</button>
<script>
// When eyes button is clicked, toggle laser class on brain
$(".flash").click(function() {
  $(".brain").toggleClass('laser');
});

// When color button is clicked...
$(".color").click(function() {
  // assign each named color a random number 0-255
  var red = Math.floor(Math.random() * 256); // 修正范围，确保能取到255
  var green = Math.floor(Math.random() * 256);
  var blue = Math.floor(Math.random() * 256);
  
  //generate on RGBA value red, green, and blue
  var randomRGBA = 'rgba('+red+','+green+','+blue+',1)'
  
  //Display the RGBA vakues in an alert window 
  $("body").css("background", randomRGBA); // 修正变量名空格问题
    //alert(randomRGBA);
});
</script>
</body>

错误修正说明 #

• JavaScript语法错误：原代码中$("body").css("background", random RGBA);里的random RGBA是错误写法，变量名不能包含空格，应改为randomRGBA
• CSS无效属性：原body { background-color: var() }中var()未指定变量名，属于无效代码，替换为默认背景色#fff
• 随机值范围优化：原Math.random() * 255生成的最大值是254，改成*256才能覆盖0-255的完整RGB范围

提前致歉，我是编程新手，还不太懂相关门道。

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