title: Do action on mouseover using Javascript (else if)
body: <p>I'm new to Javascript and I'm trying to write some code that will change the text in a specified div when some text is hovered over.</p>
  
  <p>I've written a function that activates onmouseover and changes the text using getElementById.innerHTML </p>
  
  <p>It looks like this: </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>function changePhase() {
    document.getElementById("phases").innerHTML = "Phase 1 Phase 1 Phase 1";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="phases"&gt;yada yada yada yada yada yada&lt;/div&gt;
  
  &lt;p class="hoverhand" id="title1" onmouseover="changePhase()"&gt;PHASE 1&lt;/p&gt;
  &lt;p class="hoverhand" id="title2" onmouseover="changePhase()"&gt;PHASE 2&lt;/p&gt;
  &lt;p class="hoverhand" id="title3" onmouseover="changePhase()"&gt;PHASE 3&lt;/p&gt;
  &lt;p class="hoverhand" id="title4" onmouseover="changePhase()"&gt;PHASE 4&lt;/p&gt;
  &lt;p class="hoverhand" id="title5" onmouseover="changePhase()"&gt;PHASE 5&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also have a heap more titles that I'd like to do the same thing.</p>
  
  <pre><code>&lt;p class="hoverhand" id="title2" onmouseover="changePhase()"&gt;PHASE 2&lt;/p&gt;
  &lt;p class="hoverhand" id="title3" onmouseover="changePhase()"&gt;PHASE 3&lt;/p&gt;
  &lt;p class="hoverhand" id="title4" onmouseover="changePhase()"&gt;PHASE 4&lt;/p&gt;
  &lt;p class="hoverhand" id="title5" onmouseover="changePhase()"&gt;PHASE 5&lt;/p&gt;
  </code></pre>
  
  <p>What I'd like to do is use the same function with an IF statement to change the text depending on which id is being hovered over. (or use another method if there's a better way)</p>
  
  <p>E.g. If I hover over #title2 the #phases div displays"Phase 2 Phase 2 Phase 2".</p>
  
  <p>else if</p>
  
  <p>If I hover over #title3 the #phases div displays "Phase 3 Phase 3 Phase 3" and so on.</p>
  
  <p><a href="https://jsfiddle.net/4durL08q/10/" rel="nofollow">Here's my JS fiddle so far</a> </p>
  
  <p>I'm looking for a solution in Javascript rather than Jquery please. </p>
  
  <p>Thanks!</p>