Setting up a property inside function and call it back after Element get

Question

In the example below, I have a function called color(). Is it possible to make it work as I would expect?

<div> text text </div>

<script>
function color(property) {
    return this.style.color = property;
}

document.getElementsByTagName("div").color("red"); 
</script>

The code above gives me the error:

color(...) is not a function

`document.getElementByTagName("div")` returns a nodelist / collection of elements. Also it should have an "S" after Element `document.getElementsByTagName("div")` — NewToJS, Dec 17 '17 at 15:54
@kakashisenpai: I've rolled back your edit just now. On SO, we don't edit questions such that they invalidate existing answers, it makes for a confusing situation where the answer seems to say something the question doesn't ask (in this case, that there is no `getElementByTagName` function). — T.J. Crowder, Dec 17 '17 at 16:17
@T.J.Crowder , no you get me wrong in my local .js file its getElements `with s` not getElement i just made mistake when i was typing here, its typing fault not a knowledge fault . — kakashi senpai, Dec 17 '17 at 16:20
@kakashisenpai: I understand. But the way SO works, once it's been addressed by an answer, we don't change it in the question. But meh, it's not an important part of the answer, I'll just modify the answer. (But in general, don't do that, it's not how SO works and it can trigger quite negative reactions.) Happy coding! — T.J. Crowder, Dec 17 '17 at 16:24

T.J. Crowder · Accepted Answer · 2017-12-17T16:25:50.863

There are two problems and an issue with that code:

getElementsByTagName returns a collection of elements, not just a single element. More here.
There's nothing that attaches the function color to an element or collection of elements.
To use this as the element, you'll need to make sure color is called in a special way.

Also note there's no need for the return in color.

If you want to apply the color function to all matching elements, you'll need a loop:

function color(property) {
    this.style.color = property;
}

var list = document.getElementsByTagName("div");
for (var i = 0; i < list.length; ++i) {
  color.call(list[i], "red"); 
}

<div> text text </div>

But if you don't use this, the call is clearer:

function color(el, property) {
    el.style.color = property;
}

var list = document.getElementsByTagName("div");
for (var i = 0; i < list.length; ++i) {
  color(list[i], "red"); 
}

<div> text text </div>

Note: You could add a property to the HTMLElement prototype (or even NodeList or HTMLCollection) so you could call color as a method, as you did in your question. That's probably not a good idea; if everyone did it, it would quickly lead to conflicts. Generally it's better to only modify the built-in DOM prototypes when applying a polyfill, but not for custom functions.

thank you sir nice explain :) , i learned good stuff in your post , but why some ppl down vote my question ? its a javascript question where is the bad thing here ? we ask because we dont know , if we already know as they expect then no need to ask then . the logic in this website is broken — kakashi senpai, Dec 17 '17 at 16:02
@kakashisenpai: FWIW, they probably felt you didn't do enough research before posting. More here: https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users — T.J. Crowder, Dec 17 '17 at 16:16

Setting up a property inside function and call it back after Element get

1 Answers1