<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var redtoggle=false;
function togglered()
{
redtoggle = !redtoggle;
if (redtoggle)
{
document.getElementById("txtInput").style.color = "red";
}
else
{
document.getElementById("txtInput").style.color = "black";
}
}
var bluetoggle=false;
function toggleblue()
{
bluetoggle = !bluetoggle;
if (bluetoggle)
{
document.getElementById("txtInput").style.color = "blue";
}
else
{
document.getElementById("txtInput").style.color = "black";
}
}
var greentoggle=false;
function togglered()
{
greentoggle = !greentoggle;
if (greentoggle)
{
document.getElementById("txtInput").style.color = "green";
}
else
{
document.getElementById("txtInput").style.color = "black";
}
}
</script>
<select id="dropdown">
<button onclick="myFunction()" class="dropbtn">color change</button>
<div id="myDropdown" class="dropdown-content">
<option id="disabledselected" >color change</option>
<option id="btnTogglered" onclick="togglered()">red</option>
<option id="btnToggleblue" onclick="toggleblue()">blue</option>
<option id="btnTogglegreen" onclick="togglegreen()">green</option>
</div>
</div>
<form>
<div>
TEXT INPUT
<br>
<input type="text" name="txtInput" id="txtInput">
</div>
</form>
</body>
</html>
Need some assistance with changing text color in a word possessor I'm working on. The text format changes are functioning properly, but the color change is not. Seeking guidance to identify and rectify the issue.