Mouse hovering with vanilla JS instead of jQuery

Question

I'm generally used to jQuery but I'm trying to write lower script as classic vanilla JS. It is supposed to enlarge an element on mouseover. Looks like I'm doing something wrong because it doesn't function when I use mouse to hover an element. Help me figure out where am I making a mistake.

<script>
window.onload = function() {
var calcal = document.getElementById("calcal");
TweenMax.to(".slvun, .slvanj, .rndbtn", 8, {opacity:1, delay:6});
TweenMax.to(".slvun", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
TweenMax.to(".slvanj", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
var ttt = new TimelineMax({repeat:-1});
ttt.to(".rndbtn", 2, {fill: '#F15D2E'})
ttt.to(".rndbtn", 2, {fill: '#EEBC27'}, "+=1")
ttt.to(".rndbtn", 2, {fill: '#8DC641'}, "+=1")
ttt.to(".rndbtn", 2, {fill: '#F15D2E'}, "+=1")

const buttonTL = new TimelineMax({paused: true, reversed: true})
  buttonTL.to('.rndbtn', .2, {scale: 5.0, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)})


calcal.onMouseOver = function(){
  buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
};
}
</script>

Answer 1

Try adding the addEventListener. This should do the trick. You need to add a mouseover and mouseleave both.

var hover = false;
document.getElementById("clickmebtn").addEventListener("mouseover", function( event ) {
 console.log('called on hover'); //just to make sure the function is getting called   
  if(!hover) {
    buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
  }
  hover = true;

  }, false);
document.getElementById("clickmebtn").addEventListener("mouseleave", function( event ) {
 console.log('called on dhjhhhjs'); //just to make sure the function is getting called   
  hover = false;
  buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();

  }, false);

Here's an example https://codepen.io/anon/pen/omqmNx

For more ref https://developer.mozilla.org/en-US/docs/Web/Events/mouseover