color change dropdown menu javascript

Question

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

So I'm making a word possessor and I've run into a problem where I can't change the color of the text, I've also added a way to change the text format but that all works and I need a little help with changing the color of the text. If anyone would be willing to help me and tell me where I've gone wrong.

Farzin Kanzi · Answer 1 · 2017-02-16T15:37:28.953

Your javascript codes are true, But why you have this between you select options?

<button onclick="myFunction()" class="dropbtn">color change</button>
<div id="myDropdown" class="dropdown-content">

You need to change your html code to this:

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

thanx for the help that helped with some of the problems i was having — Walter Munemo, Feb 16 '17 at 15:18

score 0 · Answer 2 · answered Feb 16 '17 at 15:14

0

You have a typo in your JavaScript code. You have defined the togglered function twice. The second one should be your togglegreen function.

answered Feb 16 '17 at 15:14

clarmond

358
1
7

oh thanks for that i didn't notice until you pointed that out – Walter Munemo Feb 16 '17 at 15:28

TRiNE · Accepted Answer · 2017-02-16T16:08:29.763

0

Always be simple as much as possible.

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>

edited Feb 16 '17 at 16:08

answered Feb 16 '17 at 15:29

TRiNE

5,020
1
29
42

thanks for that but i don't understand how the (c) allows you to change the colors, could you explain that to me please – Walter Munemo Feb 16 '17 at 15:43
@WalterMunemo Well. `c` is called an argument for the `myFunction`. when select is changed, function in the `onchange` is called with `c=this.options[this.selectedIndex].value`. Here this refers to the select element. By this way we pass selected color to the `myFunction`. Therefore, every time we change the selection, value of `c` changes to the selected option's value. – TRiNE Feb 16 '17 at 16:09

color change dropdown menu javascript

3 Answers3