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

Answer 1

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> 

Answer 2

<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>

Answer 3

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
  };
}());