How can I change the color of the Tag dependent on the option chosen (using pure JavaScript)?

I am trying to build a select tag, where dependent on the option chosen (colors in this case), I want the select tag box to change into that background-color. However, when I try this I can only get it to change to the uppermost child’s color (black). How can make it, so it works as intended?

What I have tried:
I have tried to find all children and put them into an array, however this seem not to work either.

I have inserted the HTML, CSS and JavaScript (Pure JS) I have so far:

var select = document.getElementById('primaryColor');
var parent = document.querySelector('.parent');
var children = parent.children; // [<div class="child..">]

select.onchange = function () {
    if (children[0]) {
      select = this.options[this.style.cssText = `
        background-color: black;
        color: white;
        border: 3px solid #333;
      `];
    }
    else if (children[1]) {
      select = this.options[this.style.cssText = `
        background-color: red;
        color: white;
        border: 3px solid #333;
      `];
    }
    else if (children[2]) {
      select = this.options[this.style.cssText = `
        background-color: green;
        color: white;
        border: 3px solid #333;
      `];
    }
    else if (children[3]) {
      select = this.options[this.style.cssText = `
        background-color: blue;
        color: white;
        border: 3px solid #333;
      `];
    }
    else {
      select = this.options[this.style.cssText = `
        background-color: purple;
        color: white;
        border: 3px solid #333;
      `];
    }
}
/* <select> styles */
select {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: sans-serif;

    /* Personalize */
    width: 100%;
    max-width: 100%;
    position: relative;
    color: #fff;
    background-color: #aaaaaa;
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 30px;
    display: block;
    cursor: pointer;
    border: 3px solid transparent;
    /*border-radius: 10px;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select option {
    color: inherit;
    background-color: gray;
}

select:focus {
    outline: none;
}

option:checked {
    background-color: #1abc9c;
}

select::-ms-expand {
    display: none;
}
<select class="parent" id="primaryColor">
  <option class="child" value="" selected disabled hidden>Choose a color</option>
  <option class="child" value="0">Black</option>
  <option class="child" value="1">Red</option>
  <option class="child" value="2">Green</option>
  <option class="child" value="3">Blue</option>
  <option class="child" value="4">Purple</option>
</select>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can do something like this:

var select = document.getElementById('primaryColor')
select.onchange = () => {

  // Initial color
  let color = 'white'

  // Check background color and change font color accordingly
  if (select.value == '#fff') color = 'black'

  select.style.cssText = `
        background-color: ${select.value};
        color: ${color};
        border: 3px solid #333;
      `
}
/* <select> styles */

select {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  font: sans-serif;
  /* Personalize */
  width: 100%;
  max-width: 100%;
  position: relative;
  color: #fff;
  background-color: #aaaaaa;
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 30px;
  display: block;
  cursor: pointer;
  border: 3px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

select option {
  color: white;
  background-color: gray;
}

select:focus {
  outline: none;
}

option:checked {
  background-color: #1abc9c;
}

select::-ms-expand {
  display: none;
}
<select class="parent" id="primaryColor">
  <option class="child" selected disabled hidden>
    Choose a color
  </option>
  <!-- Set value as the hex color -->
  <option class="child" value="#fff">White</option>
  <option class="child" value="#000">Black</option>
  <option class="child" value="#f00">Red</option>
  <option class="child" value="#0f0">Green</option>
  <option class="child" value="#00f">Blue</option>
  <option class="child" value="#204">Purple</option>
</select>

Method 2

Your if conditions are not written properly, you have only passed and existing value instead of a boolean expression which checks which color you have selected. In Javascript, passing a existing value is considered true, therefore it always ends up being black since it is the first check.

To fix this, inside every condition, for if the value selected by the select box is equal to the corresponding value of the color.

So if Black is selected, then this.value will be equal to zero, therefore you can turn the select box black if the (this.value) is equal to zero and vice versa.

but in my opinion, @aerial301’s answer is much better and cleaner.

var select = document.getElementById('primaryColor');
var parent = document.querySelector('.parent');
var children = parent.children; // [<div class="child..">]

   select.onchange = function () {
  if (this.value === '0') {
  select = this.options[this.style.cssText = `
    background-color: black;
    color: white;
    border: 3px solid #333;
  `];
}
else if (this.value === '1') {
  select = this.options[this.style.cssText = `
    background-color: red;
    color: white;
    border: 3px solid #333;
  `];
}
else if (this.value === '2') {
  select = this.options[this.style.cssText = `
    background-color: green;
    color: white;
    border: 3px solid #333;
  `];
}
else if (this.value === '3') {
  select = this.options[this.style.cssText = `
    background-color: blue;
    color: white;
    border: 3px solid #333;
  `];
}
else {
  select = this.options[this.style.cssText = `
    background-color: purple;
    color: white;
    border: 3px solid #333;
  `];
}
}
/* <select> styles */
select {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: sans-serif;

    /* Personalize */
    width: 100%;
    max-width: 100%;
    position: relative;
    color: #fff;
    background-color: #aaaaaa;
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 30px;
    display: block;
    cursor: pointer;
    border: 3px solid transparent;
    /*border-radius: 10px;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select option {
    color: inherit;
    background-color: gray;
}

select:focus {
    outline: none;
}

option:checked {
    background-color: #1abc9c;
}

select::-ms-expand {
    display: none;
}
<select class="parent" id="primaryColor">
  <option class="child" value="" selected disabled hidden>Choose a color</option>
  <option class="child" value="0">Black</option>
  <option class="child" value="1">Red</option>
  <option class="child" value="2">Green</option>
  <option class="child" value="3">Blue</option>
  <option class="child" value="4">Purple</option>
</select>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x