title: Dynamically toggle placeholder color with JavaScript
body: <p>I have an HTML input, as well as some buttons.</p>
  
  <pre><code> &lt;input type="number" placeholder="" id="id"/&gt;
   &lt;button onclick="myfunction()" &gt;Click Me&lt;/button&gt;
   &lt;button onclick="toggle()"&gt;toggle&lt;/button&gt;
  </code></pre>
  
  <p>The first button has this JavaScript function</p>
  
  <pre><code>var myfunction=function(){
      if(bool){
          a=document.getElementById('id');
          a.placeholder='Invalid Character';
      }
  };
  bool=false;
  </code></pre>
  
  <p>and the second button's function is this:</p>
  
  <pre><code>toggle=function(){
      bool=!bool;
  };
  </code></pre>
  
  <p>Basically, click the second button to change whether</p>
  
  <pre><code>bool
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks!</p>
  
  <p>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</p>
  
  <p>I can ONLY use javscript, not css.</p>