CODEWITHSUNDEEP
javascript
anova01
anova01

Reputation: 91

How do I create something like this?

My task is to create this: element()
element() will have methods like shake().

I think I started with the element() with no methods, and used function element() for this.

function element(theElement) { // element() has a parameter named toReturn, but theElement probably makes more sense
  return document.querySelectorAll(theElement);
}

And then I moved on to the methods. But first, I had to drop the function (as far as I knew) and replaced it with a class. I knew that you would need to use classes for things like element().method.

class element {
  constructor(theElement) {
    return document.querySelectorAll(theElement)
  }
}

Version with methods

class element {
  constructor(theElement) {
    param1 = theElement;
    return document.querySelectorAll(theElement);
  }
  ...
  static shake(shakeBy = 10) {
    ...
  }
  ...
}

But, I run into another problem and got an error saying that classes could not be invoked without new. And then things would get totally bizarre:

var something = new element('.putis') // NANI?

So, I decided to make element() return this: [new element(param1), document.querySelectorAll(param1)].
This would result in not just invoking the class, but new element() would return document.querySelectorAll(param1) and new element(), which would return new element(), which would also return new element(), which would then also return that, and the return tree gets taller and taller until it finally reaches that point in the sky called the stack limit. The return tree looks like this:

-------------------stack limit-----------------
    \          /
    ...      ...
      \      /
new element()  query selector
        \     /
 new element()   query selector
          \     /          
   new element()    query selector
           \         /
            element()
---the ground---------------------

So I have switched to objects instead and did this:

var element =
[
  function(a) {
    param1 = a;
    return document.querySelectorAll(a)
  },
  {
    // example method
    "print": function() {
      window.alert('Hello, my name is' + param1;)
    }
  }
]

But I got an error that reads element() is not a function, although I think element() is a function. It's obviously an array, but the array is supposed to make the element key's value return two things at once.

I've tried solutions like these:

  this.direction = function() {
    letterIndex = 0;
    rotateProp = new String();
    do {
      rotateProp += elements.style.transform.charAt(letterIndex);
      ++letterIndex;
    }
    while (elements.style.transform.charAt(letterIndex) != '(');
  }

var element = (toReturn) => {
  ...
}

But all of them failed.

How do I accomplish my task?

I know I shouldn't use classes since I had problems with the classes as mentioned: attempts to invoke the class failed.

Upvotes: 3

Views: 112

Answers (1)

Unmitigated
Unmitigated

Reputation: 89472

You should simply assign the result of document.querySelectorAll to a property of the object itself instead of returning it. Also, omit static if you want the methods to be created on all instances of the class.

class element {
  constructor(theElement) {
    this.elements = document.querySelectorAll(theElement)
  }
  shake(shakeBy=10){
     //You can use this.elements here
   }
}

Upvotes: 2

Related Questions