title: Set Text Color and Text Next to Checkbox
body: <p>How do I set the text color (and text) next to a checkbox?</p>
  
  <pre><code>&lt;div style="float: left;"&gt;
      &lt;input type="checkbox" id="idCheckbox1" onClick="myCheckbox('idCheckbox1')" value=1&gt;&lt;label&gt;Checkbox 1&lt;/label&gt;&lt;/input&gt;&lt;/div&gt;
  &lt;script&gt;
  function myCheckbox(idCheckbox)
  {
      var ctlCheckbox = document.getElementById(idCheckbox);
      var ctlCheckText = ctlCheckbox.parentNode.getElementsByTagName("LABEL")[0];
      var text = ctlCheckText.innerText;
  
      if (true == ctlCheckbox.checked)
          alert('checked');
      else
          alert('not checked');
      if (ctlCheckbox.checked == true)
         ctlCheckText.innerText = 'smurfs';
      else
         ctlCheckText.InnerText = 'gargamel';
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Searching the internet helped a bit. I am able to get the text, and determine the check state, however setting the color or changing the text more than initially does not work.</p>
  
  <p>I want to set the text blue, so I was thinking the following, which does not work, annoyingly so.</p>
  
  <pre><code> if (true == ctlCheckbox.checked)
       ctlCheckText.innerHTML = '&lt;span style="color:#0000FF"&gt;' + text + '&lt;/span&gt;';
   else
       ctlCheckText.innerHTML = '&lt;span style="color:#000000"&gt;' + text + '&lt;/span&gt;';
  </code></pre>
  
  <p>Thoughts?</p>
  
  <p><a href="https://www.w3schools.com/code/tryit.asp?filename=G21HM18SJQIC" rel="nofollow noreferrer">Here</a> is a sample project, which I created?</p>