This javascript and HTML not linked?

1

Hey guys, is there anything wrong with the way the JS file and the HTML file are linked? I set it so that hovering over the blue square with the contactUs ID will make an arrow appear (downArrow in the CSS). Nothing is happening. I have done used Javascript successfuly a few times and can’t see the difference between what I have done before and this simple code. Where’s the error?

https://codepen.io/fran-bembibre/pen/PoqPdaW

thanks!

2

Hi @franb96,

Looks like your functions are never called.

Hope this helps!

3

your function hoverArrow1 is trying to call getElementByClassName but there is no class called downArrow. looks like theres an id with than name though

in your html maybe change the div attr from id= to class=downArrow

4

This was an oversight when I uploaded the code, as I tried to change classes to ID at the last minute to see if there was a problem with that and the whole thing got jumbled. However, correcting that oversight still does not make it work.

https://codepen.io/fran-bembibre/pen/PoqPdaW

Here it is corrected, all the classes properly named in all three files, and still not working. I have spent an entire afternoon changing classes to IDs, changing the css, checking spelling and syntax, wondering why this simple little code is not answering and it’s driving me insane.

5

When you are using document.getElementsByClassName('downArrow') it will create an array of all elements contains attribute class="downArrow" and in your html you only have one element with class="downArrow" so to get this element use index 0 i.e. :

    var arrow = document.getElementsByClassName('downArrow');
    arrow[0].id="downArrowOnHover";

use same index in outArrow() function.

6

I would make downArrowOnHover a class and use classList. It has the methods add, remove and toggle. Using toggle you can have just one function and call it on both onmouseover and onmouseout.

But, you may not need JS for this. Although it does depend on where the arrows should be and how they should behave in relation to the boxes and their hover effect. You can move the downArrow elements inside the elements with the hover. However, this will make the arrows move up with the elements which might not be what you want.

When doing simple stuff I’d suggest using transitions for hover effect when possible.

Here it is with just CSS.
https://jsfiddle.net/fpbuk82s/

I changed some ids to classes because you had the same id more than one time which isn’t valid. If you write some CSS that you want to reuse, use a class, not an id.