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