Functions to Change Classes Not Wokring

Question

I have these functions to add listeners to change classes:

function dropClass(el, style){
    if(el.classList.contains(style) === true){
         el.classList.remove(style);
    };
};

function addClass(el, style){
    if(el.classList.contains(style) === false){
        el.classList.add(style);
    };
};

function onLoad(myFunction){
    document.addEventListener('load', myFunction);
};

function onClickAdd(el, style){
    el.addEventListener('click', addClass(el, style));
};

function onClickRemove(el, style){
    el.addEventListener('click', dropClass(el, style));
};

function onMouseOverAdd(el, style){
    el.addEventListener('mouseover', addClass(el, style));
};

function onMouseOverRemove(el, style){
    el.addEventListener('mouseover', dropClass(el, style));
};

...and have some of them interacting with each other to where they actually work:

onLoad(addClass(body, 'openEyes'));
onLoad(addClass(h1, 'slideDown'));
onLoad(addClass(p1, 'slideRight'));
onLoad(addClass(p2, 'slideLeft'));
onLoad(addClass(p3, 'slideUp'));

...but when I try to use the listener event functions they do not work based on the defined action but on the page load. What's wrong?

An example of the type of function stacking that doesn't work:

onLoad(onClickAdd(el, style);

It "works" in that it adds the class, but it doesn't do it on the listener event and only on the page load which it shouldn't do. This is the site I'm building and trying to do a minimalist design without its being too static (http://myskills.epizy.com/DynamicSite.html) , and these functions should work but for some reason don't.

score 0 · Answer 1 · answered Mar 18 '19 at 05:12

0

You defined it to fire on load only:

onLoad(addClass(body, 'openEyes'));
onLoad(addClass(h1, 'slideDown'));
onLoad(addClass(p1, 'slideRight'));
onLoad(addClass(p2, 'slideLeft'));
onLoad(addClass(p3, 'slideUp'));

function onLoad(myFunction){
    document.addEventListener('load', myFunction);
};

If you want it to work onCLick use one of your defined functions:

function onClickAdd(el, style){
    el.addEventListener('click', addClass(el, style));
};

function onClickRemove(el, style){
    el.addEventListener('click', dropClass(el, style));
};

function onMouseOverAdd(el, style){
    el.addEventListener('mouseover', addClass(el, style));
};

function onMouseOverRemove(el, style){
    el.addEventListener('mouseover', dropClass(el, style));
};

for example:

onClickAdd(addClass(h1, 'slideDown'));
onMouseOver(addClass(p1, 'slideRight'));
onMouseOverRemove(addClass(p1, 'slideRight'));

answered Mar 18 '19 at 05:12

flppv

4,111
5
35
54

Doesn't having it fire that function on load only add the listener, though? Why would it actually make the function call on an event that hasn't happened yet? – Mar 18 '19 at 05:16
well I suppose that this script is defined in your file. So it's being read by browser before DOM loaded, and executed. After that `'load'` event fires. If you want everything to work only after page loaded, wrap your script into another onload listener. – flppv Mar 18 '19 at 05:20
Just wanted to say I also tried the method suggested of using one of my other functions without onLoad but it still just executes without waiting for the action. When the functions are directly attached to the HTML, there's no problem whatsoever. – Mar 18 '19 at 07:43
Have also tried: document.getElementsByTagName('li').addEventListener('click', addClass(leftSideBar, 'spinOut')); ...but it still doesn't wait for the click. – Mar 18 '19 at 08:15

Kamil Kiełczewski · Answer 2 · 2019-03-18T05:38:41.720

The main problem was:

in onLoad you call onClickAdd which not return handler function but execute it
same problem with call addClass (so i change addClass and removeClass to return handlers (using arrow function ).
in onLoad change string load to DOMContentLoaded (info)

Here I provide example for onClickAdd

function dropClass(el, style) {
  return () => el.classList.remove(style);
};

function addClass(el, style) {
  return () => el.classList.add(style);
};

function onLoad(myFunction) {
  document.addEventListener('DOMContentLoaded', myFunction);
};

function onClickAdd(el, style) {
  el.addEventListener('click', addClass(el, style));
};




let h1 = document.querySelector('h1');

onLoad(() => onClickAdd(h1, 'slideDown'));

.slideDown {
  color: red;
}

<h1>Header</h1>


Click on header

Functions to Change Classes Not Wokring

2 Answers2