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'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!

• javascript
• mouseover
• onmouseover

Share Improve this question Follow edited Sep 13, 2016 at 12:50 Al Foиce ѫ 4,3251212 gold badges4343 silver badges5050 bronze badges asked Sep 13, 2016 at 12:37 Andrew BloyceAndrew Bloyce 3322 silver badges88 bronze badges 1

• have you need mouse leave event ? open this one jsfiddle/AhirHasmukh/4durL08q/15 – H D Ahir Commented Sep 13, 2016 at 12:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 ment:

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

You can also use event.target.id to get the element that is triggering the event:

function changePhase(){

 var x = "";
 switch(event.target.id){

   case "title1":
   x = "Title1";
   break;

   case "title2":
   x = "Title2";
   break;

   default: //you would follow the same logic used for the first two cases
   x = "Default";

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

This considers your initial requirement of a conditional statement being present to dictate what the innerHTML is.

See the fiddle:

https://jsfiddle/pehggpfk/1/

I would say that @Pugazh solution is cleaner and easier to maintain though.