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>
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>
I didn't read your code, but usually to change colors and accomplish changes to the UI, it's easiest to manipulate classes with the specific change. Here's some code and a link to codepen illustrating this:
<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>
#box
width 100px
height 100px
.red
background red
.blue
background blue
.black
background black
.green
background green
(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
})
})()