将参数传递给javascript方法

Question

我有这样的html代码：

<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看起来像：

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

我想用实际值动态替换示例。 请告知如何。 我试图在函数中添加参数并修改了调用

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

但这没有用

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

在这种情况下，一切都是正确的。 一个问题是如何传递变量myparam 。 如果变量是全局变量，我们几乎可以将代码修改为：

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

只是改变：

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

至：

onclick="app.shareOnIg(myparam);"

Answer 3

看来您需要将参数传递给shareOnIg函数

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

Answer 4

取而代之的是：

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

那这个呢？

  <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

从长远来看，您会发现，省去onclick属性并编写适当的事件处理程序会容易得多。 以下是如何完成此操作的示例。

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

            }
        }
};

您问题的解决方案是在shareOnIg方法中添加一个参数变量，并在shareOnIg时调用该方法。

在上面的重写中，我有

• 给button一个id使其可以被找到
• 向DOMContentLoaded事件添加了一些行为，该事件在页面已加载足够的DOM准备就绪时触发
• 在行为上，我使用按钮的id找到了按钮，并将函数附加到其click事件。