passing parameter to javascript method

Question

i have html code like:

<button type="button" class="button button-raised larger" onclick="app.shareOnIg();">Share on Instagram</button>&nbsp;
 </div>
 <script type="text/javascript">
 app.initialize();
 </script>

js looks like:

var app = {
 // Application Constructor
 initialize: function() {
 this.bindEvents();
 },
 bindEvents: function() {
 document.addEventListener('deviceready', this.onDeviceReady, false);
 },
shareOnIg: function () {
 Instagram.share('picture', 'example', function (err) {
 });
 }
};

I want to replace example with actual value dynamically. plz advise how. I tried to add a parameter in the function and modified the call like

 <button type="button" class="button button-raised larger" onclick="app.shareOnIg(" + myparam + ");">Share on Instagram</button>&nbsp;
 </div>

but this did not work

• Tushar: I'd suggest to use addEventListener to bind event from JavaScript. To pass parameter from onclick, you need to wrap the string in quotes onclick="myFun('" + param + '");
• Alisher Gafurov: the variable myparam is global ? If variable is global you can use it like that: onclick="app.shareOnIg(myparam);"
• Vik: @Alisher Gafurov if you reply it as answer i can mark it correct
• Alisher Gafurov: @Vik thx, i make the answer.

Answer 1

In this case all is correct. One problem is the how is passed the variable myparam. If the variable is global, we can little modify the code to:

<button type="button" class="button button-raised larger" onclick="app.shareOnIg(myparam);">Share on Instagram</button>&nbsp;
 </div>

just change:

 onclick="app.shareOnIg(" + myparam + ");"

to:

onclick="app.shareOnIg(myparam);"

Answer 2

var app = {
shareOnIg: function (value) {
 console.log(value);
 Instagram.share('picture', value, function (err) {
 });
 }
};

 <button type="button" class="button button-raised larger" onclick="app.shareOnIg( 'This is the passed Value');">Share on Instagram</button>&nbsp;

Answer 3

It seems you need to pass an argument to shareOnIg function

shareOnIg: function (data) {
 // console.log(data) here to see the parameter passed from the thml
 Instagram.share('picture', 'example', function (err) {});
 }

Answer 4

Instead go unobtrusive:

var app = {
 // Application Constructor
 initialize: function() {
 this.bindEvents();
 },
 bindEvents: function() {
 var btns = document.querySelectorAll('.button');
 document.addEventListener('deviceready', this.onDeviceReady, false);
 btns.forEach((btn)=>btn.addEventListener('click', this.shareOnIg.bind(myparam)));
 },
 shareOnIg: function(param) {
 Instagram.share('picture', 'example', function(err) {});
 }
};

Answer 5

What about this?

 <input type="text" value="John" id="name">
 
 <button onclick="sayHi('name')">Say Hi</button>
 <script>
 function sayHi(control) {
 var e = document.getElementById(control);
 console.log(e.value);
 }
 </script>

Answer 6

You will find it much easier in the long run to dispense with onclick attributes and to write proper event handlers. Below is an example of how it can be done.

<button type="button" id="doit" ... > ... </button>
document.addEventListener("DOMContentLoaded",function() {
 var button=document.querySelector('button#doit');
 button.addEventListener('click',function() {
 app.shareOnIg(myparam);
 }, false);
}, false);
var app = {
 // Application Constructor
 initialize: function() {
 this.bindEvents();
 },
 bindEvents: function() {
 document.addEventListener('deviceready', this.onDeviceReady, false);
 },
 shareOnIg: function (something) { // new parameter
 Instagram.share('picture', something, function (err) {
 }
 }
};

The solution to your question is to add a parameter variable in your shareOnIg method, and call the method when the tmie comes.

In the above rewrite, I have

• given the button an id to make it findable
• added some behaviour to the DOMContentLoaded event which triggers when the page has loaded enough for the DOM to be ready
• in the behaviour, I have located the button using its id and attached a function to its click event.