将参数传递给javascript方法

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

Answer 1

 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 2

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