title: Changing CSS of elements of the same class onmouseover, depending on each element's id
body: <p>I am trying to have an external (not inline) JavaScript code to handle multiple elements depending on their class and id.</p>
  <p>My goal is that if an element is of a certain class, its' CSS will change depending on its' id name when it is hovered over.</p>
  <p>In this example:</p>
  <pre><code>&lt;p class=&quot;p-class&quot; id=&quot;000&quot;&gt;Hi&lt;/p&gt;
  &lt;p class=&quot;p-class&quot; id=&quot;FFF&quot;&gt;Hi&lt;/p&gt;
  &lt;p class=&quot;p-class&quot; id=&quot;FFFF66&quot;&gt;Hi&lt;/p&gt;
  &lt;p class=&quot;p-class&quot; id=&quot;498F83&quot;&gt;Hi&lt;/p&gt;
  </code></pre>
  <p>My goal is to get this:</p>
  <pre><code>&lt;p class=&quot;p-class&quot; id=&quot;000&quot; style=&quot;color:#000&quot;&gt;Hi&lt;/p&gt;
  &lt;p class=&quot;p-class&quot; id=&quot;FFF&quot; style=&quot;color:#FFF&quot;&gt;Hi&lt;/p&gt;
  &lt;p class=&quot;p-class&quot; id=&quot;FFFF66&quot; style=&quot;color:#FFFF66&quot;&gt;Hi&lt;/p&gt;
  &lt;p class=&quot;p-class&quot; id=&quot;498F83&quot; style=&quot;color:#498F83&quot;&gt;Hi&lt;/p&gt;
  </code></pre>
  <p>I thought about something in this direction:</p>
  <pre><code>const pElements = document.querySelectorAll('.p-class');
  for (let i = 0; i &lt; pElements .length; i++) {
    pElements[i].addEventListener('mouseover', function() {
      pElements[i].style.color = `#${pElements[i].getAttribute('id')`;
    });
  }
  </code></pre>
  <p><strong>But</strong>, I am relatively new to this and I don't know if the above code is valid or how to properly trigger it.</p>
  <p>Any insights/suggestions will be highly appreciated!</p>