div color depends on two output-CodePudding

I want to create a div which color depends on two select input. The soil_colour1 and soil_colour2 will determined the colour of the div(colorbox).

below are my current code:

<select name="soil_colour" id="soil_colour1">
                        <option value="dark">Dark</option>
                        <option value="medium">Medium</option>
                        <option value="light">Light</option>
                        <option value="pale">Pale</option>
                    </select>
                    <select name="soil_colour" id="soil_colour2">
                        <option value="grey">Grey</option>
                        <option value="purple">Purple</option>
                        <option value="blue">Blue</option>
                        <option value="green">Green</option>
                        <option value="brown">Brown</option>
                        <option value="orange">Orange</option>
                        <option value="yellow">Yellow</option>
                        <option value="red">Red</option>
                    </select>
            
            
                    <div id="colorbox" style="background-color: #FFFFFF7F ; padding: 10px; border: 1px; width: 23%">
                    </div>

the example script that i had in mind

<script type="text/javascript">
                        function findColor()
                        {
                            if (document.getElementById('soil_colour1').value = 'dark')
                            {
                                if (document.getElementById('soil_colour2').value = 'grey')
                                {
                                    document.getElementById('colorbox').style.background-color = '#4F4E50'
                                }
                            }
                        }
                    </script>

CodePudding user response：

In your colorbox definition you put the background color in hey with transparency. It's working well now in browser in easier to combine.

If you make a console log with your background color, browser will give you a rgb (or rgba) value. You can have a function to convert rgb to hex, if you search here you'll find this question. But here, I made the snippet with hex value, faster, shorter.

Because browser will give you rgb, I'm using data attribute to store the full hex current color background in colorbox.

For HTML color name in hex, look here: https://www.w3schools.com/colors/colors_names.asp

For transparency in hex, look here: Hex transparency in colors

document.querySelector('#soil_colour1').addEventListener('change', evt => {
  const elcolbox = document.querySelector('#colorbox');
  const color = elcolbox.dataset.bkgcol.slice(0, -2);
  elcolbox.dataset.bkgcol = color   evt.target.value;
  elcolbox.style.backgroundColor = color   evt.target.value;
})

document.querySelector('#soil_colour2').addEventListener('change', evt => {
  const elcolbox = document.querySelector('#colorbox');
  const transparency = document.querySelector('#colorbox').dataset.bkgcol.slice(-2);
  elcolbox.dataset.bkgcol = evt.target.value   transparency;
  elcolbox.style.backgroundColor = evt.target.value   transparency;
})

<select name="soil_colour" id="soil_colour1">
  <option value="E6">Dark</option>
  <option value="99">Medium</option>
  <option value="66">Light</option>
  <option value="33">Pale</option>
</select>

<select name="soil_colour" id="soil_colour2">
  <option value="#808080">Grey</option>
  <option value="#800080">Purple</option>
  <option value="#0000FF">Blue</option>
  <option value="#008000">Green</option>
  <option value="#A52A2A">Brown</option>
  <option value="#FFA500">Orange</option>
  <option value="#FFFF00">Yellow</option>
  <option value="#FF0000">Red</option>
</select>


<div id="colorbox" style="background-color: #FF0000FF ; padding: 10px; border: 1px; width: 23%" data-bkgcol="#FF0000FF">
</div>

CodePudding user response：

One strategy to achieve that result could be to control the color value using the HSL model and definining the map of colors (weight colorname = color to set the css background property) as css classes addressing the color weight by setting the lightness and the color name setting the hue and saturation.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

In this demo I have the weight category of classes defined starting with lightness-* and the color name category of classes defined as color-*.

In this way you can define the color map using a css asset instead of dealing with js configuration.

Each of those classes just control the css custom variables: --hue, --saturation, --lightness

Those variable are used by the master css rule assigned to the target element that you wish to style with the given color as background:

.custom-background-color {
  background: hsl(var(--hue) var(--saturation) var(--lightness));
}

Notes: The demo expects a target object to be the subject of the styling but since we had that custom-background-color class it could be a criteria to deduce which objects are supposed to be styled like that without having to pass a specific element fetched in advance

Then the javascript code just adds a change event listener on both the dropdowns controlling respectively the color weight and name by adding the respective classes to the target element after any were first unset.

The name of the weight and colorname classes to add to the element are a function of the values coming from the dropdown.

const colorbox = document.getElementById('colorbox');
const colorName = document.getElementById('color_name');
const colorWeight = document.getElementById('color_weight');

colorName.addEventListener('change', onColorPicked);
colorWeight.addEventListener('change', onColorPicked);

onColorPicked();

function onColorPicked(){  
  clearColor(colorbox); 
  setColor(colorbox, colorName.value, colorWeight.value);  
}

//sets the background color for target as name, weight
function setColor(target, name, weight) {
  target.classList.add(`color-${name}`, `lightness-${weight}`);
}

//removes the class color-* and lightness-* if any
function clearColor(target){
    [...target.classList].forEach( className => {      
    if (
      className.startsWith('color-') || 
      className.startsWith('lightness-')) {
        target.classList.remove(className);
    }  
  });
}

*{
  box-sizing: border-box;
}

body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 15% 70%;
  gap: 1em;
  padding: .5em;
  height: 95vh;
}

select{
  cursor: pointer;
}

#colorbox {
  padding: 10px;
  width: 100%;
  margin-top: .5em;
  grid-column: span 2;
  height: 100%;
}

.custom-background-color {
  --hue: 100;
  --saturation: 100%;
  --lightness: 100%;
  background: hsl(var(--hue) var(--saturation) var(--lightness));
}

/* lightness */

.lightness-dark {
  --lightness: 10% !important;
}

.lightness-medium {
  --lightness: 30% !important;
}

.lightness-light {
  --lightness: 50% !important; 
}

.lightness-pale {
  --lightness: 70% !important;
}

/* colors */

.color-grey {
  --hue: 0;
  --saturation: 0%;
}

.color-purple {
  --hue: 270;
  --saturation: 100%;
}

.color-blue {
  --hue: 240;
  --saturation: 100%;
}

.color-green {
  --hue: 120;
  --saturation: 100%;
}

.color-brown {
  --hue: 30;
  --saturation: 50%;
}

.color-orange {
  --hue: 30;
  --saturation: 100%;
}

.color-yellow {
  --hue: 60;
  --saturation: 100%;
}

.color-red {
  --hue: 0;
  --saturation: 100%;
}

<select id="color_weight">
  <option value="dark">Dark</option>
  <option value="medium">Medium</option>
  <option value="light">Light</option>
  <option value="pale" selected>Pale</option>
</select>

<select id="color_name">
  <option value="grey">Grey</option>
  <option value="purple">Purple</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="brown">Brown</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="red" selected>Red</option>
</select>

<div id="colorbox" >
</div>