Looks like your functions are never called.
Hope this helps!
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
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.
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.
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');
use same index in
I would make
downArrowOnHover a class and use classList. It has the methods
toggle. Using toggle you can have just one function and call it on both
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.
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.