Struggling with getting a value from a div that is clicked on

Question

JS noob here. I've been spending the last couple of weeks reading JavaScript guides on Mozilla's site and doing some basic programming challenges on codewars, and have now decided to tackle my first simple project. I'm basically making a very simple color picker where you choose a red value, a green value, and a blue value, which will then be mixed together and the color produced will go in the square at the bottom. I've already done the HTML/CSS(although it isn't done very well) and this is what it looks like: https://i.sstatic.net/rf6Qb.jpg

I'm trying to figure out how exactly I should use JavaScript to do this. One idea I had was to put an onclick attribute to each box and attach it to a function that would change the border of whatever one is clicked on, to give it the illusion of being selected. I managed to do that, but there were a couple of issues:

I'm not really sure how to only allow one box to be selected at a time (similar to radio buttons) in each row.
I'm not sure how to extract the value of the box(i.e. if the first box is clicked on the red row, I want to be able to get the value 0 for r).

Once I figure this out, I believe it will be simple to combine the values for each of the boxes clicked on and use a function to change the background color of the bottom box to the combination of the rgb values. Any help would be very much appreciated. Just in case it would help, here is the code I've done so far:

HTML:





  
  RGB Selector
  
  



  
    
      0
      1
      2
      3
      4
      5
      6
      7
      8
      9
      A
      B
      C
      D
      E
      F
    
    
      0
      1
      2
      3
      4
      5
      6
      7
      8
      9
      A
      B
      C
      D
      E
      F
    
    
      0
      1
      2
      3
      4
      5
      6
      7
      8
      9
      A
      B
      C
      D
      E
      F

CSS:

* {
  color: #f0f0f0;
  font-family: 'Brandon Grotesque';
}

body {
  background: #222;
}

main {
  position: absolute;
  top: 50%;
  margin-top: -368px;
  left: 50%;
  margin-left: -536px;
}

.square {
  height: 65px;
  width: 65px;
  border: 1px solid #333;
  border-radius: .15em;
  margin-top: 100px;
  text-align: center;
  opacity: .9;
  transition: border .1s;
}

#red > .square {
  float: left;
  background: #f00;
}

#green > .square {
  float: left;
  background: #0f0;
}

#blue > .square {
  float: left;
  background: #00f;
}

.sq0 {
  clear: left;
  /*opacity: .1;*/
}

.square span {
  position: relative;
  top: -25px;
}

#mixedColor {
  width: 100px;
  height: 100px;
  background: #fff;
  float: left;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: 308px;
  border: 1px solid #333;
}

#red .sq0 { background: #000; }
#red .sq1 { background: #100; }
#red .sq2 { background: #200; }
#red .sq3 { background: #300; }
#red .sq4 { background: #400; }
#red .sq5 { background: #500; }
#red .sq6 { background: #600; }
#red .sq7 { background: #700; }
#red .sq8 { background: #800; }
#red .sq9 { background: #900; }
#red .sqA { background: #A00; }
#red .sqB { background: #B00; }
#red .sqC { background: #C00; }
#red .sqD { background: #D00; }
#red .sqE { background: #E00; }
#red .sqF { background: #F00; }

#green .sq0 { background: #000; }
#green .sq1 { background: #010; }
#green .sq2 { background: #020; }
#green .sq3 { background: #030; }
#green .sq4 { background: #040; }
#green .sq5 { background: #050; }
#green .sq6 { background: #060; }
#green .sq7 { background: #070; }
#green .sq8 { background: #080; }
#green .sq9 { background: #090; }
#green .sqA { background: #0A0; }
#green .sqB { background: #0B0; }
#green .sqC { background: #0C0; }
#green .sqD { background: #0D0; }
#green .sqE { background: #0E0; }
#green .sqF { background: #0F0; }

#blue .sq0 { background: #000; }
#blue .sq1 { background: #001; }
#blue .sq2 { background: #002; }
#blue .sq3 { background: #003; }
#blue .sq4 { background: #004; }
#blue .sq5 { background: #005; }
#blue .sq6 { background: #006; }
#blue .sq7 { background: #007; }
#blue .sq8 { background: #008; }
#blue .sq9 { background: #009; }
#blue .sqA { background: #00A; }
#blue .sqB { background: #00B; }
#blue .sqC { background: #00C; }
#blue .sqD { background: #00D; }
#blue .sqE { background: #00E; }
#blue .sqF { background: #00F; }

.square:hover {
  border: 1px solid #fff;
  cursor: pointer;
}

Lachlan Goodhew-Cook · Accepted Answer

If you ad an id to each of your divs

function getColor(divIdToFind){
    div = document.getElementById(divIdToFind))
    div.style.backgroundColor
}

Or you could keep your html the same and use a variation using https://stackoverflow.com/a/3808886/3724365 to get it by class. personally I would rework it to use ids.

Struggling with getting a value from a div that is clicked on

Answers (2)

Related Questions