How to create functional Methods

Question

What I want to approach is to create a custom Function that looks like this:

access('h1').content('Hello World');

And this is how I tried to accomplish that:

function access(Tag)
{
  var Element = document.getElementsByTagName(Tag)[0];

  this.content = function(Content)
  {
     if (Content !== undefined)
          return Element.innerHTML = Content;
     else return Element.innerHTML;
  }

  return Element;
}

So this Function shall be in the verge of changing the Content or just returning it. Unfortunately it does not work this Way.

So far I played with it for about an Hour to rewrite it and find a Solution on my own, but I have not been successfull and I also do not know how to describe this Problem to Google it.

How can I solve this it?

just return `this` or the element performing operation on, at the end. — vjdhama, Jan 17 '15 at 12:52
Daniel, it looks like you come from C# or some other similar language, and JS is very different. You should read [this](https://github.com/getify/You-Dont-Know-JS)! — jrsala, Jan 17 '15 at 13:09

Sampath Liyanage · Accepted Answer · 2015-01-17T13:04:22.250

Replace this with Element in your code.

function access(Tag)
    {
      var Element = document.getElementsByTagName(Tag)[0];
    
      Element.content = function(Content)
      {
         if (Content !== undefined)
              return Element.innerHTML = Content;
         else return Element.innerHTML;
      }
    
      return Element;
    }
    
access('h1').content('Hello World');

<h1>Hello</h1>

Or try something like this.

function access(Tag)
    {
      var Element = document.getElementsByTagName(Tag)[0];
    
      var content = function(Content)
      {
         if (Content !== undefined)
              return Element.innerHTML = Content;
         else return Element.innerHTML;
      }
    
      return {content: content};
    }
    
access('h1').content('Hello World');

<h1>Hello</h1>

Thank you. The second Way worked for me – Daniel Messner Jan 17 '15 at 15:13 — Daniel Messner, Jan 17 '15 at 15:13

How to create functional Methods

1 Answers1