Javascript Color Mixer with RGB code calculated below div

Question

I have made a color mixer.The div starts out black and you add red values of (1,5 or 10) blue values (1, 5, or 10) and green values(1, 5, or 10) to change the color. The code works I just need some help with the last part. When you click on one of the 9 buttons I need to calculate the RGB code below the div. I cannot figure this part out. I was wondering if I could get some guidance with the javascript to make the rgb calculation to show up below the 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>

You have the basis for what you want. Just do something similar to what you are doing with the background color, but set the `textContent` of the element instead. Also, you have invalid events on the red buttons. — Herohtar, Feb 23 '18 at 18:53
@herohtar I actually meant to take out the onclick for the red buttons. I was just trying to figure out a way to figure it out before I posted the question. — king_coney, Feb 23 '18 at 19:11
are you trying to display rgb value of button click below color mixer div..I mean are you looking for something like this - https://codepen.io/nagasai/pen/ddjEGm — Naga Sai A, Feb 23 '18 at 19:30
Yes, that is actually what I was trying to do and I was stuck on. What did you do? — king_coney, Feb 23 '18 at 19:33
document.getElementById('rgbCode').innerHTML = "rgb(" + redVal + "," + greenVal + "," + blueVal + ")"; — Naga Sai A, Feb 23 '18 at 19:35
I am just adding rgb value to the rgbCode div..check codepen url for reference - https://codepen.io/nagasai/pen/ddjEGm/ — Naga Sai A, Feb 23 '18 at 19:36
@NagaSaiA okay, that is a simple fix. I must have been overthinking the issue. If I wanted to make the Red, Green, and Blue have a max of 255 would I need to create a new function for that? The reason I ask is because what would be RGB(255,255,255) — king_coney, Feb 23 '18 at 19:45
Possible duplicate of [How do I replace text inside a div element?](https://stackoverflow.com/questions/121817/how-do-i-replace-text-inside-a-div-element) — Herohtar, Feb 23 '18 at 20:03
You can handle the max in the same line that you increment the value. eg, `redVal = Math.min(255, redVal + 10)` — Herohtar, Feb 23 '18 at 20:05
okay, thank you @Herohtar and Naga Sai A I will add that in. — king_coney, Feb 23 '18 at 20:15

Naga Sai A · Answer 1 · 2018-02-23T20:06:36.917

1

To achieve expected result, modify colorChange() function to below to add rgb value to rgbCode div

function colorChange(){
  document.getElementById('rgbCode').textContent = "rgb(" + redVal + "," + greenVal + "," + blueVal + ")";
  colorDiv.style.backgroundColor = "rgb(" + redVal + "," + greenVal + "," + blueVal + ")"
}

https://codepen.io/nagasai/pen/ddjEGm/

edited Feb 23 '18 at 20:06

answered Feb 23 '18 at 19:43

Naga Sai A

10,771
1
21
40

for exact color, may be you can try something - https://codepen.io/nagasai/pen/BYPeMN – Naga Sai A Feb 23 '18 at 19:58
thanks @Herohtar, updated my answer with textContent , as it is faster than innerHTML – Naga Sai A Feb 23 '18 at 20:05
By the way, since `style.backgroundColor` is already a string, you could just do `document.getElementById('rgbCode').textContent = colorDiv.style.backgroundColor` so you don't have to repeat the concatenation. – Herohtar Feb 23 '18 at 20:14

Javascript Color Mixer with RGB code calculated below div

1 Answers1