無法使用onclick事件調用JavaScript函數

Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Getting Started With PubNub</title>
  </head>
  <body>

    HotelName: <input type="text" id="rname"/> <br/>
    <input type = "button" value = "Submit" onclick = "publish()"/>

    <script src="https://cdn.pubnub.com/pubnub.min.js"></script>
    <script charset="utf-8">
      (function(){

        var PUBNUB_demo = PUBNUB.init({
          publish_key: 'demo',
          subscribe_key: 'demo'
        });

        PUBNUB_demo.subscribe({
          channel: 'b',
          message: function(m){console.log(m)},
          connect : publish
        });

        function publish() {
          var hn = document.getElementById('rname').value
          var hname = JSON.stringify(hn);
          PUBNUB_demo.publish({
            channel: 'a',
            message: {"text":hn}
          });
        }

      })();

    </script>

  </body>
</html>

在這種情況下，不會執行onclick='publish()' 。 顯示的錯誤是Uncaught ReferenceError: publish is not defined 。 盡管我已經定義了發布功能。 發布功能應獲取文本框的值，並將其添加到我要發送到發布功能的JSON中。

Answer 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Getting Started With PubNub</title>
  </head>
  <body>
    <script src="https://cdn.pubnub.com/pubnub.min.js"></script>
    <script charset="utf-8">


        var PUBNUB_demo = PUBNUB.init({
          publish_key: 'demo',
          subscribe_key: 'demo'
        });

        PUBNUB_demo.subscribe({
          channel: 'b',
          message: function(m){console.log(m)},
          connect : publish
        });

        function publish(hn) {
          hnaam = JSON.stringify(hn);
          PUBNUB_demo.publish({
            channel: 'a',
            message: {"text":hnaam}
          });

        }

        function getName(){
          var hname= document.getElementById("rname").value;
          document.getElementById("printname").innerHTML = hname;
          publish(hname);
        }



    </script>
    <br/>
    <span id ='printname'></span>
    <br/>
    <input type ="text" id="rname"/><br>
    <input type ="button" value="Submit" onclick="getName()"/>



  </body>
</html>

Answer 2

您的publish（）函數不起作用，因為在您嘗試訪問它時，它在全局上下文中不可用。 因為您的命名函數是在自調用函數中定義的，所以它們在運行時結束時也會被銷毀。 當您單擊按鈕時，您的代碼已完成運行，並且不再可以訪問自調用函數的上下文。

使用IIFE的原因似乎是因為您不想污染全局上下文，並且盡管動機正確，但您沒有將函數正確地暴露給DOM。

快速解決方案

您可以簡單地從自調用函數內部刪除代碼：

    var PUBNUB_demo = PUBNUB.init({
      publish_key: 'demo',
      subscribe_key: 'demo'
    });

    PUBNUB_demo.subscribe({
      channel: 'b',
      message: function(m){console.log(m)},
      connect : publish
    });

    function publish() {
      var hn = document.getElementById('rname').value
      var hname = JSON.stringify(hn);
      PUBNUB_demo.publish({
        channel: 'a',
        message: {"text":hn}
      });
    }

模塊化方法

您將要編寫模塊化代碼。 有許多不同的方法可以執行此操作，但是最快，最有效的方法稱為“顯示模塊模式”。

因為我們不想污染全局名稱空間，但是仍然需要訪問我們的代碼，所以我們將創建稱為模塊的全局變量，並選擇公開哪些函數。

  var MyModule = (function(){

    var PUBNUB_demo = PUBNUB.init({
      publish_key: 'demo',
      subscribe_key: 'demo'
    });

    PUBNUB_demo.subscribe({
      channel: 'b',
      message: function(m){console.log(m)},
      connect : publish
    });

    function publish() {
      var hn = document.getElementById('rname').value
      var hname = JSON.stringify(hn);
      PUBNUB_demo.publish({
        channel: 'a',
        message: {"text":hn}
      });
    }

    return {
      publish: publish()
    }

  })();

現在，在您的HTML中，您應該能夠在onclick屬性內調用以下函數：

MyModule.publish()

Answer 3

問題是您的函數在（）中...只需取出這些函數即可解決問題。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <script src="https://cdn.pubnub.com/pubnub.min.js"></script>
    <title>Getting Started With PubNub</title>
  </head>
  <body>
    HotelName: <input type="text" id="rname"/> <br/>
    <input type = "button" value = "Submit" onclick = "publish()"/>    
    <script charset="utf-8">
        var PUBNUB_demo = PUBNUB.init({
          publish_key: 'demo',
          subscribe_key: 'demo'
        });

        PUBNUB_demo.subscribe({
          channel: 'b',
          message: function(m){console.log(m)},
          connect : publish
        });

        function publish() {
          var hn = document.getElementById('rname').value
          var hname = JSON.stringify(hn);
          PUBNUB_demo.publish({
            channel: 'a',
            message: {"text":hn}
          });
        }
    </script>
  </body>
</html>

無法使用onclick事件調用JavaScript函數

問題描述

3 個解決方案

解決方案1
0 2015-03-20 03:49:11

解決方案2
0 2015-03-20 03:51:44

解決方案3
0 2015-03-20 03:58:34

無法使用onclick事件調用JavaScript函數

問題描述

3 個解決方案

解決方案1 0 2015-03-20 03:49:11

解決方案2 0 2015-03-20 03:51:44

解決方案3 0 2015-03-20 03:58:34

解決方案1
0 2015-03-20 03:49:11

解決方案2
0 2015-03-20 03:51:44

解決方案3
0 2015-03-20 03:58:34