I am facing a challenge in styling the text inside a “div” element using a Javascript function. Initially, when the page loads, these “divs” contain no value. The values of the "divs" will change between "Open" and "Closed" twice a day when the Javascript code is executed. Below is an example of the code snippet I am currently working on.
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Color Change</title>
<style>
.txtbx {
border: 2px solid #000;
width: 80px;
height: 30px;
}
.txtbx[value="Open"]{
color: green;
}
.txtbx[value="Closed"]{
color: red;
}
</style>
<script>
function myFunction() {
document.getElementById("txtbx1").innerHTML = "Open";
document.getElementById("txtbx2").innerHTML = "Closed";
}
</script>
</head>
<body>
<div id="txtbx1" class="txtbx"></div>
<div id="txtbx2" class="txtbx"></div>
<button id="btn1" onclick="myFunction()">Click Me</button>
</body>
</html>
I have experimented with different options to change the text color dynamically based on the value, but none of them seem to work as expected.
.txtbx:has(”Open”) {
Color: green;
}
.txtbx:has(”Closed”) {
Color: red;
}
.txtbx:contains(”Open”) {
Color: green;
}
.txtbx:contains(”Closed”) {
Color: red;
}
In my specific scenario, modifying the text color via Javascript is not feasible. I am required to achieve this through CSS somehow.
Thank you for your assistance.