Change background color using JS when select option changes

Question

<select id = "Testing" onchange = Selected("'.$Variable.'")>
  <option>1</option>
  <option>2</option>
  <option>3</option>

Whatever selected, its value will be stored in $Varaiable and Selected() function will initiate.

If <option>2</option>is selected, Selected() has to change the background colour of <div class = "2">

function Selected(Data) {
  var Temp = document.getElementsByClassName(Data);
  Temp.style.backgroundColor = "#ffffff";
  alert(Data);
}

whenever I debug the code, it says Cannot set properties of undefined. Am I declaring the getElements wrongly?

(Based on _"Whatever selected, its value will be stored in $Varaiable"_, I think this duplicate close is justified.) — CBroe, Feb 16 '22 at 08:16

Abdelrhman Mohamed · Answer 1 · 2022-02-15T21:49:51.640

0

Update

if you want to change multiple elements colors use document.querySelectorAll() instead and loop throw each element and change the color likes this

div.forEach(d => {
 d.style.backgroundColor = color;
})

and remove this part

div.style.backgroundColor = color;

const select = document.getElementById("select");
function changeColor(color) {
  const divId = select.value;
  const div = document.getElementById(divId);
  div.style.backgroundColor = color;
}

<select id="select" onchange="changeColor('red')">
  <option value="">Select div to change color</option>
  <option value="div-1">div 1</option>
  <option value="div-2">div 2</option>
</select>

<div style="display: flex; height: 100px" id="div-1">Dev 1</div>

<div style="display: flex; height: 100px" id="div-2">Dev 2</div>

edited Feb 15 '22 at 21:49

answered Feb 15 '22 at 20:59

Abdelrhman Mohamed

167
11

document.getElementsByClassName its return array not a single element and since it is undefined it means you target something that doesn't exist on the page, the best way to select a single element as I did use document.querySelector() and it take a CSS selector like class .header or id # if you want to select many elements and it will return array of elements use document.querySelectorAll() – Abdelrhman Mohamed Feb 15 '22 at 21:11
Sorry for making you confuse. I have just edited the question to be more specific. – Undefined Feb 15 '22 at 21:13
sorry for the delay I have an internet prob, hmmm it's a bit easier now I update my answer and don't forget to add the value attribute like you did before, it should contain the target div id – Abdelrhman Mohamed Feb 15 '22 at 21:38

Andy Paka · Answer 2 · 2022-02-15T21:37:52.103

First you have to echo the php variable of the values in the options. I guess your code is something like this:

<select id="comboA" onchange="Selected(this)">
  <option value="">Select combo</option>
  <option value="<?php echo $Value1 ?>">Text1</option>
  <option value="<?php echo $Value2 ?>">Text2</option>
  <option value="<?php echo $Value3 ?>">Text3</option>
</select>

On change you call the JavaScript function with the select-element as this. In the function you are able to read the selected value as value-attribute from the select-element. getElementsByClassName returns a HTMLCollection. You have iterate through the collection, even if it contains only one element. In the example it is logged on the console.

function Selected(selectObject) {
  var value = selectObject.value;
  var TempList = document.getElementsByClassName(value);
  console.log(TempList) ;
  for (var i=0; i < TempList.length; i++) {      
    TempList[i].style.backgroundColor = "#ffff00";
}
  alert(value);
}

<select id="comboA" onchange="Selected(this)">
  <option value="">Select combo</option>
  <option value="div1">Text1</option>
  <option value="div2">Text2</option>
  <option value="div3">Text3</option>
</select>
<div class="div1">Container 1</div>
<div class="div2">Container 2</div>
<div class="div3">Container 3</div>

You can also use getElementById if there is only one div-container. Set the id-attribute instead of the class name. In the js-code you don't have to iterate through the resulting HTMLCollection.

function Selected(selectObject) {
  var value = selectObject.value;
  var Temp = document.getElementById(value);
  Temp.style.backgroundColor = "#ffff00";
}

<select id="comboA" onchange="Selected(this)">
  <option value="">Select combo</option>
  <option value="div1">Text1</option>
  <option value="div2">Text2</option>
  <option value="div3">Text3</option>
</select>
<div id="div1">Container 1</div>
<div id="div2">Container 2</div>
<div id="div3">Container 3</div>

If only the selected div-container should be colored, you have to unset the background-color of all others. Take one class name for all div-container, select and color them all like in the first example, then color the selected one with one of the methods.

Change background color using JS when select option changes

2 Answers2

Update