how to pass attribute in argument to a function

Question

i want to create function to apply any attribute or function to all selectors what is the correct way to do it

function applyToAll(elm,func)
  {
   let i = elm.length; while (i--) { elm[i].func; }
  }

  li = document.querySelectorAll("li");
  hide = style.display = "none";

  applyToAll(li,hide) // Uncaught ReferenceError: style is not defined

i can pass the property direct like this

let i = elm.length; while (i--) { elm[i].style.display = "none"; }

but i want let function dynamic so i can use for example :

prop = innerHTML = "<b>something</b>";
let i = elm.length; while (i--) { elm[i].prop }

`elem[i].prop` doesn't do anything Do you want to set it to a certain value? — Code-Apprentice, Apr 01 '21 at 22:30

georg · Accepted Answer · 2021-04-01T22:34:58.837

2

Two changes:

function applyToAll(elm, func) {
    let i = elm.length;
    while (i--) {
        func(elm[i])  // <---
    }
}

li = document.querySelectorAll("li");
hide = e => e.style.display = "none";  // <---


applyToAll(li, hide)

Change 1: func is not a method, and cannot be called with a dot

Change 2: just style.display = ... is an expression which is evaluated immediately, on the other side, e => e.style.display is a function which is evaluated on call.

As a side note, querySelectorAll returns a NodeList which already provides forEach which is exactly what your function does, up to the order of the application.

edited Apr 01 '21 at 22:34

answered Apr 01 '21 at 22:29

georg

211,518
52
313
390

@connexo there *is* a difference (https://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone), but I don't know if it is enough to prevent the switch of use to the `hidden` attribute. – Reality Apr 01 '21 at 22:59

Reality · Answer 2 · 2021-04-01T22:45:40.787

From what the comments say and what I see, I think your hide variable is meant to contain an arrow function.

It should be re-written to this (as shown in the comments).

hide = e => e.style.display = "none";

Also, the func parameter as an argument isn't bound to the passed in element, it is bound to a variable as one of the function's arguments (in this case, it contains the function of hide.

In addition, you also have to call functions with (). Otherwise, it means pretty much nothing in your context;

So, in your while loop, change this:

elem[i].func;

to this:

func(elem[i]);

This executes your function as a callback and passes in the element as an argument.

One more thing: since I don't see hide declared anywhere else (or redeclared for that matter), if the latter is true then I recommend using a const variable declaration keyword.

So, your hide function declaration statement should be changed to this:

const hide = e => e.style.display = "none";

This tells the interpreter that you are declaring a variable.

While technically (in non-strict mode), omitting the variable declaration keyword is oftentimes accepted, it's bad practice.

For more info, see: What is the purpose of the var keyword and when should I use it (or omit it)?

You also seem to be having trouble with arrow functions.

I recommend reading this to eliminate any confusion with how arrow functions are used/formed.

how to pass attribute in argument to a function

2 Answers2