Dynamically toggle placeholder color with JavaScript

Question

I have an HTML input, as well as some buttons.

 <input type="number" placeholder="" id="id"/>
 <button onclick="myfunction()" >Click Me</button>
 <button onclick="toggle()">toggle</button>

The first button has this JavaScript function

var myfunction=function(){
    if(bool){
        a=document.getElementById('id');
        a.placeholder='Invalid Character';
    }
};
bool=false;

and the second button's function is this:

toggle=function(){
    bool=!bool;
};

Basically, click the second button to change whether

bool

is true or false. The first button will set a placeholder if the value of bool is true. I want to figure out how to DYNAMICALLY set the color of a placeholder with JavaScript. I have found how to do it with CSS, but I need JavaScript. No jQuery or other frameworks please.

Thanks!

Travis J I specifically said that this is not a duplicate, as I CANNOT use CSS, like the question you mistakenly marked this as a duplicate of

I can ONLY use javscript, not css.

@TravisJ this isn't a duplicate because those use only css or Jquery, i can use neither. — Leshy, Sep 09 '15 at 23:43
Why can you not use css? It is possible to render css from JavaScript. — Travis J, Sep 09 '15 at 23:45
I need this done dynamically with javascript. I cannot use css(in a stylesheet; if you know a way that uses javascript to manipulate css, I'm happy with that) — Leshy, Sep 09 '15 at 23:49
This post details toggling a class name http://stackoverflow.com/a/14615765/1026459 — Travis J, Sep 09 '15 at 23:56
@TravisJ I've tried those but theyre not working. I need the color for the placeholder to be applied via JS, and then the placeholder text will be set with JS — Leshy, Sep 10 '15 at 00:01
@TravisJ can you set up a fiddle cause I just tried it and I can't get it to work... — Leshy, Sep 10 '15 at 00:09
@TravisJ sorry it hadn't loaded. I forgot to refresh the page. — Leshy, Sep 10 '15 at 00:22
@TravisJ With all due respect, but if somebody wants a solution in a specific technology and nothing else, then we should respect that. We can mention the other possibilities, but s/he is the one who decides which way to go. And in the case of this question, there is a way to do it in a pure JS without any CSS as the OP requested, so why not? I voted to reopen this question unless we can find another question that was answered in JS. — Racil Hilan, Sep 10 '15 at 00:49

J Santosh · Accepted Answer · 2015-09-10T14:11:54.227

May be this is the not the RIGHT way to add inline styles, but this is the only way i found to full fill the OP requirement.

var placeholderColor = '#f0f';
var FontColor = '#000';

bool = true;

function toggle() {
    bool = !bool;
}

function myfunction() {
    if (bool) {
        a = document.getElementById('id');
        a.placeholder = 'Invalid Character';
        a.style.color = placeholderColor;
    }
}

function textChange() {
    a = document.getElementById('id');
    if (a.value != '') a.style.color = FontColor;
    else {
        a.placeholder = 'Invalid Character';
        a.style.color = placeholderColor;
    }
}

<input type="text" id="id" onkeyup='textChange()' />
<button onclick="myfunction()">Click Me</button>
<button onclick="toggle()">toggle</button>

Dynamically toggle placeholder color with JavaScript

1 Answers1