2015-03-20 5 views
0
<!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, который я отправляю в функцию публикации.Невозможно вызвать функцию javascript, используя событие onclick

+2

Публикация() прилагается и не публикуется; он доступен только в рамках родительской функции. Вам нужно вытащить его за пределы обертки, чтобы он был доступен. –

+0

@BrianMains Это не обертка jQuery, это IIFE. –

+1

Да, спасибо @ AlexanderO'Mara Я думал, что вижу $, но вы правы. –

ответ

0
<!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> 
0

Ваша функция 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() 
0

проблема заключается в том, что у вас есть свои функции() ... просто выйти из этих функций и проблема отсутствует.

<!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> 
Смежные вопросы