最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Do action on mouseover using Javascript (else if) - Stack Overflow

programmeradmin6浏览0评论

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!

Share Improve this question edited Sep 13, 2016 at 12:50 Al Foиce ѫ 4,32512 gold badges43 silver badges50 bronze badges asked Sep 13, 2016 at 12:37 Andrew BloyceAndrew Bloyce 332 silver badges8 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

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.

发布评论

评论列表(0)

  1. 暂无评论