顏色變化下拉菜單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

來源

2017-02-16 Walter Munemo

儘可能簡單。

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>

來源

2017-02-16 15:29:57 TRiNE

感謝這一點，但我沒有幫助瞭解（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">

來源

2017-02-16 15:10:51

thanx的，與一些我在 –

你在你的JavaScript代碼有一個錯字。您已經定義了兩次切換功能。第二個應該是你的togglegreen功能。

來源

2017-02-16 15:14:18 clarmond

哦感謝，這些問題有助於我沒有注意到，直到你指出了這一點 –

顏色變化下拉菜單javascript

回答

相關問題