Do action on mouseover using Javascript (else if)

Question

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.

I've written a function that activates onmouseover and changes the text using getElementById.innerHTML

It looks like this:

function changePhase() {
  document.getElementById("phases").innerHTML = "Phase 1 Phase 1 Phase 1";
}

<div id="phases">yada yada yada yada yada yada</div>

<p class="hoverhand" id="title1" onmouseover="changePhase()">PHASE 1</p>
<p class="hoverhand" id="title2" onmouseover="changePhase()">PHASE 2</p>
<p class="hoverhand" id="title3" onmouseover="changePhase()">PHASE 3</p>
<p class="hoverhand" id="title4" onmouseover="changePhase()">PHASE 4</p>
<p class="hoverhand" id="title5" onmouseover="changePhase()">PHASE 5</p>

I also have a heap more titles that I'd like to do the same thing.

<p class="hoverhand" id="title2" onmouseover="changePhase()">PHASE 2</p>
<p class="hoverhand" id="title3" onmouseover="changePhase()">PHASE 3</p>
<p class="hoverhand" id="title4" onmouseover="changePhase()">PHASE 4</p>
<p class="hoverhand" id="title5" onmouseover="changePhase()">PHASE 5</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)

E.g. If I hover over #title2 the #phases div displays"Phase 2 Phase 2 Phase 2".

else if

If I hover over #title3 the #phases div displays "Phase 3 Phase 3 Phase 3" and so on.

Here's my JS fiddle so far

I'm looking for a solution in Javascript rather than Jquery please.

Thanks!

Answer 1

Use this to reference the element being hovered. Here is a simple example.

function changePhase(obj) {
  document.getElementById("phases").innerHTML = "You hovered " + obj.innerHTML;
}

<div id="phases">yada yada yada yada yada yada</div>

<p class="hoverhand" id="title1" onmouseover="changePhase(this)">PHASE 1</p>
<p class="hoverhand" id="title2" onmouseover="changePhase(this)">PHASE 2</p>
<p class="hoverhand" id="title3" onmouseover="changePhase(this)">PHASE 3</p>
<p class="hoverhand" id="title4" onmouseover="changePhase(this)">PHASE 4</p>
<p class="hoverhand" id="title5" onmouseover="changePhase(this)">PHASE 5</p>

Updated solution based on User's comment:

function changePhase(obj) {
  var txt = "";

  switch (obj.id) {
    case "title1":
      txt = "Apple";
      break;
    case "title2":
      txt = "Banana";
      break;
    case "title3":
      txt = "Mango";
      break;
    case "title4":
      txt = "Orange";
      break;
    case "title5":
      txt = "Grapes";
      break;
  }

  document.getElementById("phases").innerHTML = txt;
}

<div id="phases">yada yada yada yada yada yada</div>

<p class="hoverhand" id="title1" onmouseover="changePhase(this)">PHASE 1</p>
<p class="hoverhand" id="title2" onmouseover="changePhase(this)">PHASE 2</p>
<p class="hoverhand" id="title3" onmouseover="changePhase(this)">PHASE 3</p>
<p class="hoverhand" id="title4" onmouseover="changePhase(this)">PHASE 4</p>
<p class="hoverhand" id="title5" onmouseover="changePhase(this)">PHASE 5</p>

P.S: switch provides better performance than if...else