title: Change text color of a part of paragraph in JS
body: <p>I have a JS function to going through a paragraph element. And I have a dictionary. I need to check each word of paragraph with each key of dictionary and if they are matching, I need to color the original paragraph word in red color by clicking on a button. </p>
  
  <p>JS function</p>
  
  <pre><code>function n()
  {
  var a = {German:["German1","German2"],plays:["plays1","plays2"],forward: 
  ["forward1","forward2"]};
  var x = document.getElementById("p1").textContent.split(" ");
  
  for (i=0; i&lt;x.length; i++)
      {
          for (j=0; j&lt;Object.keys(a).length; j++)
              {
                  if (x[i]==Object.keys(a)[j])
                      {
                          x[i].style.color="red";
                      }
              }
      }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;p id="p1"&gt;Marco Reus is a German professional footballer who plays as a 
  forward for Borussia Dortmund and 
  the Germany national team. He is renowned for his versatility, speed and 
  technique, 
  but also for proneness to injury.&lt;/p&gt;
  
  &lt;button name="b1" onclick="n()"&gt;Next&lt;/button&gt;
  </code></pre>
  
  <p>But after clicking on the button, Console says that Cannot set property 'color' of undefined at n. How I solve this?</p>