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。 / p>

快速解决方案

您只需从自调用函数中删除代码即可：

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

模块化方法

您想要编写模块化代码。有许多不同的方法可以做到这一点，但最快和最流行的方式称为揭示模块模式。

因为我们不想污染全局命名空间，但仍然需要访问我们的代码，我们将创建名为Modules的全局变量，并且我们将选择暴露哪些函数

  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 个答案: