未定义颜色变量。

$("#output").stop(true,true).hide().html( color ).stop(true,true).show( "fade", 1500 );

你需要使用colorid变量来代替。如果你想改变颜色和盒子里的字符串，这里是代码。

document.getElementById("output").style.color = colorid; 
$("#output").stop(true,true).hide().html( colorid ).stop(true,true).show( "fade", 1500 );

如果你想在框中显示颜色名称，你需要传递你分配给html函数的字符串：

$(document).ready(function() {
  $(".colorbutton").on("click", function() {
    var colorid = $(this).attr("id");

    $("#output").css("backgroundColor", colorid);
  }); // end event handler
}); // ends document.ready

这将改变输出框的背景颜色。

你所需要做的就是传递你的 button id's 并生成 eventlistener。所以每次你点击按钮时，你的div的背景颜色会根据值而改变。

document.addEventListener('DOMContentLoaded', () => {
    const red = document.getElementById('red');
    const blue = document.getElementById('blue');
    const green = document.getElementById('green');
    const output = document.getElementById('output');

    red.addEventListener('click', function onClick(event) {
        output.style.backgroundColor = 'red';
    });
    blue.addEventListener('click', function onClick(event) {
        output.style.backgroundColor = 'blue';
    });
    green.addEventListener('click', function onClick(event) {
        output.style.backgroundColor = 'green';
    });
});

body {
  background-image: url("https://newton.ncc.edu/gansonj/ite154/img/crayons.jpg");
  font-family: arial;
  text-align: right;
  color: #008B8B;
}

#pagewrap {
  border: 8px #800000 solid;
  padding: 10px;
  width: 600px;
  border-radius: 25px;
  text-align: center;
  background: white;
  margin: 40px auto 0px auto;
}

#title {
  font-size: 2.2em;
  border-bottom: 7px #008B8B double;
  padding: 10px 0px 10px 0px;
  color: #008B8B;
  text-align: center;
}

#formtext {
  text-align: center;
  font-size: 1.29em;
  margin-top: 20px;
}

#usergrade {
  text-align: center;
  margin: 5px 20px 10px 20px;
}

.colorbutton {
  color: white;
  cursor: pointer;
  padding: 5px 0px 5px 0px;
  border: 3px solid #CCCC99;
  border-radius: 25px;
  width: 150px;
}

.colorbutton:hover {
  background: #CCCCCC;
  color: yellow;
  border: 3px solid #003366;
}

#output {
  font-size: 5em;
  padding-top: 100px;
  width: 200px;
  height: 100px;
  margin: 30px auto 30px auto;
  border: 5px black double;
  font-size: 1em;
  font-family: arial;
}

<div id="pagewrap">
    <div id="title">Crayon Color Factory</div>
    <div id="formwrap" style="margin-top: 30px;">
        <input type="button" class="colorbutton" id="red" style="background-color:red;" value="RED Color">
        <input type="button" class="colorbutton" id="blue" style="background-color:blue;" value="BLUE Color">
        <input type="button" class="colorbutton" id="green" style="background-color:green;" value="GREEN Color">
        <div id="output">Change Me!!!!!</div>
    </div>
    <!-- ends div#formwrap -->
</div>
<!-- ends div#pagewrap -->