Get element within function

Question

I did:

var element = document.getElementById('myelement');

Now I want to do:

 element.myFunction();

but I have no idea how to get the element within the function. How do I do this?

function myFunction() {
// Get element here?
}

Answer 1

In javascript since you are declaring

var element = document.getElementById('myelement');

You already have the element in the global scope, so you can simply call it inside your function

function myFunction() {
  // Do something with your element
}

EDIT: If you're instead declaring your element inside another function or if you want to use the same function for different elements, you must use a parameter. This is the call:

myFunction(element)

And this is the function

function myFunction(element) {
  // Do something with your element
}

Answer 2

If you want to chain your your function with the element, then you need to extend the prototype of the HTMLElement , or Node , objects:

HTMLElement.prototype.myFunction = function (parameters) {
    var elementToActOn = this;
    elementToActOn.style.color = 'green';
    return this; // for further chaining
}

Or:

Node.prototype.myFunction = function (parameters) {
    var elementToActOn = this;
    elementToActOn.style.color = 'green';
    return this; // for further chaining
}

With this approach this , inside the myFunction() method, will refer to the element selected by:

document.getElementById('elementID').myFunction();

JS Fiddle demo , using the HTMLElement prototype.

JS Fiddle demo , using the Node prototype.

Similarly, if all you want to do is pass the element-node to the function without 'explicitly' passing it as an argument:

function myFunction () {
    this.style.color = 'red';
}

document.getElementById('elementID').addEventListener('click', myFunction);

JS Fiddle demo .

If you'd prefer to act on multiple elements, selected by getElementsByTagName() , getElementsByClassName() or querySelectorAll() (among others), then you'd need, instead, to extend the NodeList prototype, for example:

NodeList.prototype.myFunction = function (parameters) {
    var elements = this;
    [].forEach.call(elements, function(a){
        a.style.color = 'green';
    });
    return this; // for chaining
}

/* calling the function, with a simple demonstration of why you might want to
   chain, by returning 'this': */
var len = document.getElementsByClassName('elementClass').myFunction().length;
console.log(len);

JS Fiddle demo .

Answer 3

You can add a custom function to the prototype of HTMLElement objects like this:

HTMLElement.prototype.customFunc = function(){
    // within this function, 'this' will refer 
    // to the element that it was called on
};

This means that any element will have access to the customFunc function as a method. For example:

HTMLElement.prototype.customFunc = function(){
    console.log(this.id);
};

// now assuming your HTML contains #myElement and #anotherElem:
document.getElementById('myElement').customFunc(); // displays 'myElement'
document.getElementById('anotherElem').customFunc(); // displays 'anotherElem'

Obviously, be careful with the naming of the function, as you probably don't want to overwrite any pre-existing methods or properties.

Answer 4

Is it what you want

    <input type = "button" value = "Next" id = "btnNext" />

    <script>
    HTMLElement.prototype.myFunction = function()
    {
        alert(this.id);
    }

    var elem = document.getElementById("btnNext");
    elem.myFunction();

    </script>

Answer 5

Given

var element = document.getElementById('myelement');

It looks like you want to have a function using the this keyword

function myFunction() {
    console.log(this); // logs `this` (which will be `element`)
}

And rather than setting a property so you could element.myFunction(); , I'd suggest using Function.prototype.call or Function.prototype.apply , ie

myFunction.call(element); // element gets logged

Answer 6

rather u should try this , i will give an example for a div with onclick

<script>

function myfunc(){
getElementById('sample').whatever function u want
}
</script>

And in the body u can use -

<body>
<div id="sample" onclick="myfunc()">The function will happen onclicking the div</div>
</body>