I want to get input ID here and use it to change input color to be grey. Then repeat the process for other inputs with green color
var getGreenColor = document.getElementsByClassName("my_inputs")[0].style.color;
if (getGreenColor == "green") {
console.log("green")
}
else console.log(getGreenColor)
<input type="text" style="color: green;" id="1" class="my_inputs" value="stuff">
<input type="text" style="color: green;" id="2" class="my_inputs" value="stuff">
<input type="text" style="color: green;" id="3" class="my_inputs" value="stuff">
<input type="text" style="color: green;" id="4" class="my_inputs" value="stuff">
So from what I understand, you want to change all inputs with green color text to grey. If that were the case, you would want to get the elements in question by doing the following:
var greenInputsArray = document.getElementsByClassName("my_inputs");
And then you could loop through the array and if the color is green, you can change the color to grey as follows:
for (var i = 0; i < greenInputsArray.length; i++) {
if(greenInputsArray[i].style.color == "green") {
greenInputsArray[i].style.color = "grey";
}
}
You need the style.color or getComputedStyle
The style.color is undefined if not inline
const getColor = ele => ele.style.color || window.getComputedStyle(ele).color;
document.querySelectorAll(".my_inputs").forEach((ele,i) => {
const color = getColor(ele);
console.log(i,color)
if (color === "green" || color === "rgb(0, 128, 0)") {
ele.style.color = "grey"
}
})
#id1 {
color: green;
}
<input type="text" style="color: green;" id="id2" class="my_inputs" value="stuff" />
<input type="text" id="id1" class="my_inputs" value="stuff">
<input type="text" style="color: green;" id="id3" class="my_inputs" value="stuff">
<input type="text" style="color: red;" id="id4" class="my_inputs" value="stuff">
<input type="text" style="color: green;" id="id5" class="my_inputs" value="stuff">
Just use
var elements = document.getElementsByClassName('my_inputs');
for (let a=0; a < elements.length; a++) {
if (elements[a].style.color == 'green') {
elements[a].style.color = 'grey';
}
}
This will loop through the elements and if it is green, turn it to grey.