I created a script to enlarge text onmouseover but can't get the event listener to work

Question

I have written some Javascript to try and enlarge my list of anchors text when they are hovered over the text increases in size and when they are not beng hovered over they revert to normal size.

Do I need a seperate class with an animation back to regular size? and what is making the code go so wrong?

const numHeaderAnchors = 5;
const numFooterAnchors = 3;

var anchorsAll = document.getElementsByTagName("a");
var anchorsInList = [];
var count = 0;

for(var i = numHeaderAnchors; i < document.anchors.length - numFooterAnchors; i++){
    anchorsInList[count] = anchorsAll.item(i);
    console.log(anchorsInList[count].text);
    count++;
}

function zoomLetters(numAnchor){
    anchorsInList[numAnchor].classList.add("zoom");
}

function deZoomLetters(numAnchor){
    anchorsInList[numAnchor].classList.remove("zoom")
}

for(var i = 0; i < anchorsInList.length;i++){
    anchorsInList[i].addEventListener(onmouseover, zoomLetters(i));
    anchorsInList[i].addEventListener(onmouseout, deZoomLetters(i));
}

here is my css transition class.

.zoom {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    font-size: 3em;
 }

Thanks for the help!

`addEventListener('mouseover'...` and `addEventListener('mouseout'...` — Michael Coker, Jun 15 '17 at 16:33
You are also executing your callbacks immediately instead of passing them — Patrick Evans, Jun 15 '17 at 16:33
Change to `function zoomLetters(numAnchor) { return function() { anchorsInList[numAnchor].classList.add("zoom"; }; }`, or pass as `() => zoomLetters(i)`. — , Jun 15 '17 at 16:33
If you are not testing javascript, better use CSS :hover selector. — Alexandr, Jun 15 '17 at 16:34

score 1 · Accepted Answer · answered Jun 15 '17 at 16:39

You can create the same effect much easier with basically plain HTML and CSS. Just add a class when creating your anchors (you can do this in your for loop and just add a class="zoom" to that HTML element.

Then in CSS, you can take advantage of :hover like so:

.zoom {
   font-size: 3em;
}

.zoom: hover {
   -webkit-transition: 1s;
   -moz-transition: 1s;
   -ms-transition: 1s;
   -o-transition: 1s;
    transition: 1s;
    font-size: 6em;
}

You can do the same thing with a: hover

I created a script to enlarge text onmouseover but can't get the event listener to work

1 Answers1