title: How to change color for mismatch words in HTML using javascript
body: <p>I have a <code>span</code> and an <code>input</code> field; I want to change the color of the text in <code>span</code> when I enter that text in input field.</p>
  
  <p>Following is my code:</p>
  
  <p>i want, if i type wrong word then that word will red in span</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i=0;
  var idx=0;
  document.body.onkeydown = function(e){
  
      if(e.keyCode == 32 )
      
  {
  highlight();
  }
  }
  function highlight() {
    var str= document.getElementById("pera").innerText.split(' ');
    var text= str[i];
    var wrdl = text.length;
    var inputText = document.getElementById("pera");
    var innerHTML = inputText.innerText;
   var pretext = innerHTML.slice(0, idx);
   var postext = innerHTML.slice(idx+text.length);
   
    if ( idx &gt;= 0 &amp;&amp; text!="")
      {      
  var highlightedText = pretext; 
     highlightedText += "&lt;span class='highlight'&gt;";
    highlightedText += text;
    highlightedText += "&lt;/span&gt;";
    highlightedText += postext;
       document.getElementById("pera").innerHTML=highlightedText;
      }
   
  i++;
  idx += parseInt(text.length+1);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highlight
  {
  background-color:yellow;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="pera"&gt;This paragraph is a value of span&lt;/span&gt;
  &lt;/br&gt;
  &lt;input type="text" id ="inp" onfocus="highlight();" /&gt;</code></pre>
  </div>
  </div>
  </p>