Javascript混色器，RGB代码计算低于div

Question

我制作了一台调色板.div开始是黑色的，你可以添加（1,5或10）蓝色值（1,5或10）和绿色值（1,5或10）的红色值改变颜色。代码工作我只是需要一些帮助与最后一部分。当你点击9个按钮之一时，我需要计算div下方的RGB代码。我无法理解这一部分。我想知道我是否可以通过 javascript 获得一些指导，使rgb计算显示在div下方。

//get elements

var dvSpeak = document.querySelector("#speak");
var btnOne = document.querySelector("#btnOne");
var btnTwo = document.querySelector("#btnTwo");
var btnThree = document.querySelector("#btnThree");
var btnFour = document.querySelector("#btnFour");
var btnFive = document.querySelector("#btnFive");
var btnSix = document.querySelector("#btnSix");
var btnSeven = document.querySelector("#btnSeven");
var btnEight = document.querySelector("#btnEight");
var btnNine = document.querySelector("#btnNine");
var colorDiv = document.querySelector("#colorDiv");
var redVal = 0;
var blueVal = 0;
var greenVal = 0;


//add event listeners
btnOne.addEventListener("click", dealWithAClick1);
btnTwo.addEventListener("click", dealWithAClick2);
btnThree.addEventListener("click", dealWithAClick3);
btnFour.addEventListener("click", dealWithAClick4);
btnFive.addEventListener("click", dealWithAClick5);
btnSix.addEventListener("click", dealWithAClick6);
btnSeven.addEventListener("click", dealWithAClick7);
btnEight.addEventListener("click", dealWithAClick8);
btnNine.addEventListener("click", dealWithAClick9);

//i would actually call this function colorChange
function dealWithAClick1(event) {
  redVal = redVal + 1;
  colorChange();
}

function dealWithAClick2(event) {
  blueVal = blueVal + 1;
  colorChange();
}

function dealWithAClick3(event) {
  greenVal = greenVal + 1;
  colorChange();
}

function dealWithAClick4(event) {
  redVal = redVal + 5;
  colorChange();
}

function dealWithAClick5(event) {
  blueVal = blueVal + 5;
  colorChange();
}

function dealWithAClick6(event) {
  greenVal = greenVal + 5;
  colorChange();
}

function dealWithAClick7(event) {
  redVal = redVal + 10;
  colorChange();
}

function dealWithAClick8(event) {
  blueVal = blueVal + 10;
  colorChange();
}

function dealWithAClick9(event) {
  greenVal = greenVal + 10;
  colorChange();
}



function colorChange() {
  colorDiv.style.backgroundColor = "rgb(" + redVal + "," + greenVal + "," + blueVal + ")"
}


//

body {
  background-color: black;
  text-align: center;
}

#speak {
  color: #555;
}

#colorDiv {
  height: 300px;
  width: 590px;
  background-color: black;
  margin: auto;
}

#btnOne {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #FF0000;
  width: 187px;
}

#btnTwo {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #0000FF;
  width: 187px;
}

#btnThree {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #00FF00;
  width: 187px;
}

#btnFour {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #FF0000;
  width: 187px;
}

#btnFive {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #0000FF;
  width: 187px;
}

#btnSix {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #00FF00;
  width: 187px;
}

#btnSeven {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #FF0000;
  width: 207px;
}

#btnEight {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #0000FF;
  width: 207px;
}

#btnNine {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #00FF00;
  width: 207px;
}

#buttons {
  width: 600px;
  padding: 10px;
  margin: auto;
  border: 5px solid black;
}

#wholeBox {
  width: 700px;
  height: auto;
  padding: 10px;
  border: 10px solid red;
  margin: auto;
  background-color: white;
}

<div id="wholeBox">
  <h1> Color Mixer </h1>
  <div id="colorDiv"></div>
  <br>
  <div id="rgbCode"></div>
  <br>
  <br>
  <div id="buttons">
    <button id="btnOne" value="1">Add 1 to red</button>
    <button id="btnFour" value="5">add 5 to red</button>
    <button id="btnSeven" value="10">add 10 to red</button>
    <br>
    <button id="btnTwo" value="1">add 1 to blue</button>
    <button id="btnFive" value="5">add 5 to blue</button>
    <button id="btnEight" value="10">add 10 to blue</button>
    <br>
    <button id="btnThree" value="1">add 1 to green</button>
    <button id="btnSix" value="5">add 5 to green</button>
    <button id="btnNine" value="10">add 10 to green</button>
  </div>
</div>