Squighopper25 Squighopper25 - 7 months ago 10
HTML Question

A certain div isn't raising an event

Problem:

One HTML div isn't raising an event on mouseover as the other one does.

Details:


  • Both divs are identical in every way except id

  • My javascript code has been tested to work correctly

  • Both divs reside in the same parent container

  • Changing the event type doesn't help



[Edit] More resources

Obviously, I haven't done a very good job of this question as it hasn't been well received by some.

Here is a git repo with the full source code:

https://github.com/solomonbroadbent/test

And a video of the issue:

https://solomonbroadbentnz-gmail.tinytake.com/sf/NjQ0NTg4XzMxMzI2OTM

I am actively trying to improve this question, so any suggestions are welcome.

Code:

This is basically what is happening:

<!--Necessary HTML code...-->
<div id='divA' onmouseover='abitraryJSFunction()'></div> <!--event works-->
<div i='divB' onmouseover='abitraryJSFunction()'></div> <!--event fails-->
<!-- javascript file call -->
<!--Neccisary HTML code...-->


More Specific Code:

This what I am actually trying to achieve:

HTML

<div id='leftDiv' onmouseover='showDragTab()'>
</div>
<div id='pageDiv' onmouseover='hideDragTab()'>
</div>
<div id='dragTab'>
</div>


Javascript

function showDragTab()
{
myDragTab.style.visibility = 'visible';
}
function hideDragTab()
{
myDragTab.style.visibility = 'hidden';
}

Answer

Close your divs with and fix the second one's id. There is a typo.

<div id='divA' onmouseover='abitraryJSFunction()'></div>
<div id='divB' onmouseover='abitraryJSFunction()'></div> 

Edit:

Here is a fiddle of a minimal example. You should be able to easily extend it to your case, though I would suggest breaking the mouseover events out of the dom elements and into your javascript

https://jsfiddle.net/8nw9y8vo/

Edit #2

As per your updated info, see this fiddle and you can see an example of showing, hiding a div.

https://jsfiddle.net/4x3jbwz0/