如何通過HTML

Question

從下拉選擇顏色下拉菜單更改文本字段的文本的顏色我想從

<div class = "form-group" > 
 
    <label for = "" class = "" > Select Colour < /label> 
 
    <div class = "dropdown" > 
 
<button class = "btn _select_color dropdown-toggle" 
 
type = "button" 
 
id = "dropdownMenu1" 
 
data - toggle = "dropdown" 
 
aria - haspopup = "true" 
 
aria - expanded = "false" > Green < span class = "caret _right" > < /span> <span _text_display="Green" class="color green"></span > < /button> 
 
    <ul class = "dropdown-menu _select_color_drop" 
 
aria - labelledby = "dropdownMenu1" > 
 

 
    <li > < span _text_display = "Green" 
 
class = "color green" > < /span></li > 
 
    
 
    <li > < span _text_display = "Red" 
 
class = "color red" > < /span></li > 
 
    
 
    <li > < span _text_display = "Yellow" 
 
class = "color yellow" > < /span></li > 
 
    
 
    <li > < span _text_display = "Brown" 
 
class = "color brown" > < /span></li > 
 
    
 
    <li > < span _text_display = "Orange" 
 
class = "color orange" > < /span></li > 
 
    
 
    <li > < span _text_display = "Pink" 
 
class = "color pink" > < /span></li > 
 
    
 
    <li > < span _text_display = "Silver" 
 
class = "color silver" > < /span></li > 
 
    
 
    <li > < span _text_display = "Bule" 
 
class = "color blue" 
 
name = "blue" 
 
value = "blue" > < /span></li > 
 
    
 
    <li > < span _text_display = "TEAL" 
 
class = "color TEAL" > < /span></li > 
 
    
 
    <li > < span _text_display = "NAVY" 
 
class = "color NAVY" > < /span></li > 
 
    
 
    <li > < span _text_display = "PURPLE" 
 
class = "color PURPLE" > < /span></li > 
 
    
 
    <li > < span _text_display = "OLIVE" 
 
class = "color OLIVE" > < /span></li > 
 
    
 
    <li > < span _text_display = "LIME" 
 
class = "color LIME" > < /span></li > 
 
    
 
    <input type = "hidden" 
 
name = "_color" 
 
value = "Green" > < /ul> 
 
</div> 
 
    </div>

選擇一個值和我想要的顏色會在

<form name="myForm" action="#"> 
 
    <div class="form-group"> 
 
    <label for="message"> Text Here</label> 
 
    <textarea name="txt1" id="message" cols="30" rows="9" class="form-control"></textarea> 
 
    <input type="text" value="something" onclick="this.value='';this.style.color=_color;" /> </div> 
 
</form>

選擇

從顏色列表中選擇的顏色必須反映在文本文件中。我是HTML CSS和JS的新手。

Answer 1

這是我如何理解你的問題的基本實現。

var colorSelect = document.getElementById("selectColor") 
 
var textbox = document.getElementById("textbox"); 
 
function applyColor(){ 
 
    var color = colorSelect.value; 
 
    textbox.style.color = color 
 
} 
 

 
applyColor(); 
 

 

 
colorSelect.addEventListener("change", applyColor);

<textarea id="textbox"> 
 
text 
 
</textarea> 
 

 
<select id="selectColor"> 
 
    <option value="blue">blue</option> 
 
    <option value="red"> red </option> 
 
</select>

Answer 2

我沒看過你的代碼，但通常改變顏色和完成更改UI，最簡單的方法來操縱類與特定的變化。下面是一些代碼，並codepen說明此鏈接：

HTML

<div id="container"> 
    <div id="box"></div> 
</div> 

<select id="menu"> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
    <option value="black">Black</option> 
    <option value="green">Green</option> 
</select> 

CSS（筆）

#box 
    width 100px 
    height 100px 

.red 
    background red 

.blue 
    background blue 

.black 
    background black 

.green 
    background green 

JS

(function() { 

    var box   = document.getElementById("box"); 
    var menu   = document.getElementById("menu"); 
    var currentValue = menu.value   // grabs current menu selection 

    box.classList.add(currentValue);   // adds class to element wanting to change color 

    // event listener and function to handle change 
    menu.addEventListener("change", function (e) { 
    var color = menu.value;     
    box.classList.remove(currentValue);  // removes current color class 
    box.classList.add(color);    // adds new color 
    currentValue = color;     // resets current color variable for next change 
    }) 

})() 

https://codepen.io/codyj/pen/Pjyzmz?editors=1111