如何通过从HTML下拉菜单中选择颜色来更改文本字段中文本的颜色

Question

I want to select a value from

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

and i want the color will be selected in

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

The color selected from the color list must be reflect in the textfile. I am new to HTML CSS and JS.

</div>

Answer 1

This is a basic implementation of how I understood your question.

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>

</div>