颜色变化下拉菜单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>

因此，我正在创造一个词拥有者，我遇到了一个问题，我无法更改文本的颜色，我还添加了一种方法来更改文本格式，但所有的作品，我需要一点帮助改变文字的颜色。如果有人愿意帮助我，告诉我我哪里出了问题。颜色变化下拉菜单javascript

答

尽可能简单。

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>

感谢这一点，但我没有帮助了解（c）如何让你改变颜色，你能向我解释一下 –

@WalterMunemo那么。 'c'被称为'myFunction'的参数。当select被改变时，'onchange'中的函数被调用'c = this.options [this.selectedIndex] .value'。这里指的是select元素。通过这种方式，我们将选定的颜色传递给'myFunction'。因此，每次我们改变选择时，'c'的值就会变为所选选项的值。 – TRiNE

答

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

thanx的，与一些我在 –

答

你在你的JavaScript代码有一个错字。您已经定义了两次切换功能。第二个应该是你的togglegreen功能。

哦感谢，这些问题有助于我没有注意到，直到你指出了这一点 –

颜色变化下拉菜单javascript

相关推荐