Question

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

所以我要说一句话，我遇到了一个无法改变文字颜色的问题，我还添加了改变文字的方法格式，但所有工作，我需要一点帮助改变文本的颜色。如果有人愿意帮助我并告诉我哪里出错了。

Answer 1

您的javascript代码是真的，但为什么在您选择选项之间有这个？

<button onclick="myFunction()" class="dropbtn">color change</button>
<div id="myDropdown" class="dropdown-content">

您需要将html代码更改为：

<select id="dropdown"> 
  <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>
</select>
 <button onclick="myFunction()" class="dropbtn">color change</button>
 <div id="myDropdown" class="dropdown-content"></div>

        function changeColor()
        {
            
                var txtInput = document.getElementById("txtInput");
                var ddl = document.getElementById("dropdown");
                var text = ddl.options[ddl.selectedIndex].innerHTML;
                txtInput.style.color = text;
           
        }

<select id="dropdown" onchange="changeColor()"> 
        <option id="disabledselected">color change</option>
        <option id="btnTogglered">red</option>
        <option id="btnToggleblue">blue</option>
        <option id="btnTogglegreen">green</option>
    </select>
    
     <input type="text" name="txtInput" id="txtInput" value="TEXT INPUT">

Answer 2

您的JavaScript代码中存在拼写错误。您已经两次定义了切换功能。第二个应该是你的togglegreen函数。

Answer 3

尽可能简单。

function myFunction(c) 
{
    document.getElementById("txtInput").style.color = c;
}

<form>
<select id="dropdown" onchange="myFunction(this.options[this.selectedIndex].value);"> 
  <option value="black">black</option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="#FF00F1">another</option>
</select>
<br>
Input text:
<input type="text" id="txtInput" value="test">
</form>

颜色变化下拉菜单javascript

3 个答案: