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

Question

我想从

中选择一个值

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想在

中选择颜色

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

从颜色列表中选择的颜色必须反映在文本文件中。我是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

#box
   width 100px
   height 100px

.red
  background red

.blue
  background blue

.black
  background black

.green
  background green

CSS（手写笔）

(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
  })

})()

JS

(?m)^(?:from[ ]+(\S+)[ ]+)?import[ ]+(\S+)[ ]*$

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