How pass parameter to a javascript onclick function.No jquery please

Question

I have created a button and onclick of it I want to pass the attribute values to a function

<button type="button"  name="createTask" id="createTask" class="createButton" onclick="Components.init(this)" >Add Task</button>

I also have a javascript function located in an external js file

var Components = function(attributes){
var attributed = attributes;
 var _init = function(){
    console.log("Method Executing:Compnents.init")
    alert(attributes.id)        

    }
return {
    init:_init,

    }
}()

But alerting this is showing undefined.How do I pass parameter to this javascript function. I have included this component.js which has this function at bottom of the html body

You seem to be doing things in the wrong order... attributes argument should be in the inner function, surely? — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 14, 2015 at 10:13
Where have you refereed the external file? And Components.init(this) could you please explain? — Dnyanesh
– Dnyanesh, Commented Feb 14, 2015 at 10:13
@NiettheDarkAbsol, I am creating a closure where inner function have access to a outer variable — Vaskar Ray Karmakar
– Vaskar Ray Karmakar, Commented Feb 14, 2015 at 10:22

GOTO 0 · Accepted Answer · 2015-02-14 10:18:49Z

2

Try this:

Components = {
 init: function(component) {
    console.log("Method Executing:Components.init");
    alert(component.id);
 }
};

<button type="button"  name="createTask" id="createTask" class="createButton" onclick="Components.init(this)" >Add Task</button>

answered Feb 14, 2015 at 10:18

GOTO 0

48.8k25 gold badges140 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin B. · Accepted Answer · 2015-02-14 10:36:02Z

1

<script>

var Components = function(){

var attributes;

var _init = function(elm){
    attributes = elm.attributes;
    console.log("Method Executing:Compnents.init")
    console.log(attributes.id.value);        
}

return {
    init:_init,
}

}();

</script>

edited Feb 14, 2015 at 10:36

answered Feb 14, 2015 at 10:16

Benjamin B.

4735 silver badges17 bronze badges

3 Comments

peerbolte Over a year ago

The _init function expects a parameter.. you are passing to init. In your original code, you should remove "attributes" from Components = function() to _init = function(attributes)

Vaskar Ray Karmakar Over a year ago

@Joenesy it is a closure

RobG Over a year ago

Code–only answers are not that helpful. You should explain the OP's problem and how to go about fixing it, then show some code.

RobG · Accepted Answer · 2015-02-14 22:10:27Z

In your code:

var Components = function(attributes){

by convention, functions starting with a capital letter are reserved for constructors. It's considerate to wraps an IIFE in parenthesis so it's clear that it's an IIFE from the start.

The variable attributes is included in the formal parameter list, which is effectively the same as declaring it. No parameter is passed to it, so its value is undefined. The following declaration therefore does nothing.

  var attributed = attributes;

.

  var _init = function(){
    console.log("Method Executing:Compnents.init")
    alert(attributes.id)

Since attributes is undefined, attempting to access the id property will throw an error.

  }
  return {
    init:_init,
  }

There is a trailing comma (,) that is a syntax error. It's also considered a good idea to always use semicolons.

}()

Ah, finally, it's an IIFE.

A fixed version of the code:

var components = (function() {
  var _init = function(attributes) {
    console.log("Method Executing:Compnents.init");
    alert(attributes.id);      
  };
  return {
    init:_init
  };
}());

And the call must be changed to reflect the new function name:

<button id="createTask" onclick="components.init(this)" >Add Task</button>

If you wish to persist the value passed in in a closure, you need another parameter:

var components = (function() {
  var storedAttributes;

  var _init = function(attributes) {
    storedAttributes = attributes;
    console.log("Method Executing:Compnents.init");
    alert(attributes.id);      
  };

  var _foo = function() {
    //  Do stuff with attributes
  };

  return {
    init: _init,
    foo: _foo
  };
}());

Collectives™ on Stack Overflow

How pass parameter to a javascript onclick function.No jquery please

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related