Change background color using JS when select option changes-CodePudding

<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?

CodePudding user response：

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 >Container 1</div>
<div >Container 2</div>
<div >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.

CodePudding user response：

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>