Functions to Change Classes Not Wokring

问题: I have these functions to add listeners to change classes: function dropClass(el, style){ if(el.classList.contains(style) === true){ el.classList.remove(styl...

问题:

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.


回答1:

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'));

回答2:

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

  • 发表于 2019-03-19 06:26
  • 阅读 ( 239 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除