颜色更改下拉菜单JavaScript

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

所以我正在做一个单词拥有者，并且遇到了一个无法更改文本颜色的问题，我还添加了一种更改文本格式的方法在更改文本的颜色方面有所帮助。如果有人愿意帮助我并告诉我我出了什么问题。

始终尽可能简单。

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代码中有错字。您已经定义了两次切换功能。第二个应该是您的togglegreen函数。

您的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">

相关内容

最新更新

热门标签：