Define variable inside loop and use it outside loop

[David Hosanna]

Hi guys, i new to javascript. I wanted to make my own javascript library using document.querySelectorAll, querySelectorAll is NodeList. I want the javascript work like this:

class = document.querySelectorAll(className);

for(var i = 0; i < className.length; i++) {
  class = class[i]
}

// So i can use modified class variable like

$example.prototype = {
  textNode: function(text) {
    class.textContent = text;
  }
}

Unfortunately, not working. Help me to fix that, or other alternative i can use.

[__]

Think about what you are doing:

• you’re assigning a node list to class.
• you’re looping over class, and assigning class to one of its indexes. This is the first problem: it will only work the first time, since by the time the second loop executes, class is no longer a list (it’s now a dom element) and doesn’t have any indexes.
• If you straighten this out, then class will be available outside the loop — but it will be whatever final value it was assigned in the loop. The other values will be gone.

As a side note, why are you using the length of className to determine how many times you loop over class?

It’s probably a bad idea for a method of your $example prototype to rely on a global variable (i.e., something which may or may not exist). I don’t understand exactly what you’re trying to do, but it seems like something you should pass to the function as an argument.

→ Perhaps you could describe what you’re actually trying to do in more detail. What do you need to do to each item of class in the loop? What do you need to do with class afterwards?

[David Hosanna]

My target is like jQuery selector,

$(‘foo, bar’).doSomething();

But using document.querySelector('foo, bar') is not working. I want to select all elements inside.

[__]

Well, if you want to have jQuery-like methods, you might look at how jQuery does it (or similar libraries, like the one Atelierbram suggested).

The main thing to realize is that $ [or jQuery] is a function, just like any other. When you call $, it returns an instance of a jQuery object that has all of the DOM elements that matched the selector you used. When you call a jQuery method (or plugin) on the object, they iterate over this list of elements and do {whatever} to each one in turn.

[David Hosanna]

Thanks, like i said i new to javascript. I don’t know what to do next. can you help me fix these code so it should work like jQuery selector.

function $(e) {
    if(e) {
        if(window === this) {
            return new $(e);
        }
        a = document.querySelector(e);
        return this;
    }
}

$.prototype = {
    // EventListener engine
    on: function(d, e) {
        if(a.addEventListener) {
            a.addEventListener(d, e, false);
        } else if(a.attachEvent) {
            a.attachEvent(d, e);
    },
        textNode: function(d) {
        a.textContent = d;
        return this;
    }
}

Thanks again _

[__]

Thanks, like i said i new to javascript. I don’t know what to do next.

Perhaps you should focus on learning javascript more thoroughly before tackling a project like this.

[Author]

Posts