1

I am making a chatbot with apiai package from npmjs.

I have a javascript file called 'brain.js' which I have browserified so that the html browser can know what require keyword is. But the problem that I am facing is that when I want to bind that function(in js file) with dom element for example with onclick() function, my function seems not to be referenced properly. But when I am not binding it with onclick event, everything seems to work fine. I would be glad to have some suggestion from the community on how can i make my chatbot to work from html.

this is how brain.js looks:

function fun(){
 var c;
 var apiai=require('apiai');
 const getJSON = require('simple-get-json');

var app = apiai("3dd3ae56a8094061a8fe8745dcad45a0");
var options = {
    sessionId: 'UNIQE SESSION ID'
};

var request = app.textRequest("book me a good hotel",options);

request.on('response', function(response) {

   if(response.result.action.match('hotel.book')){

       var url='http://api.openweathermap.org/data/2.5/weather?q=';
       var location='delhi';
       var end='&APPID=761ddf2847a0e1dc0ff709d8e9745d72';

       getJSON((url+location+end),function(data){
        // console.log('the temperature in '+location+' is : '+data.main.temp);
          document.addEventListener("onload",function(){document.getElementById('text').innerHTML= 'data.main.temp';})
       });  
   }
});

request.on('error', function(error) {
   // document.getElementById('demo').innerHTML='shit it is error!!!';
});

request.end();
return c;

}

I am not attaching the browserified code snippet to avoid the clumsy look that this page would have.

This is the html file that i want to run:

<!DOCTYPE html>
<html>
    <head >This is starting.
        <script src='bundles.js'>
            </script>

      </head>  

<body>

<h1 id='text' >Click on this text!</h1>
<h1 id='test'>Hello here</h1>




</body>
</html>

Please let me know if something is still left unclear. I have been trying to find an alternative for so long. So any suggestion or a clean way to do this would be appreciated. Thanks in advance.

akshit bhatia
  • 573
  • 6
  • 22
  • 1
    `fun` doesn't return anything, so `this.innerHTML` can't be set to it's value. – Claies Jun 11 '17 at 06:04
  • @Claies is correct, But i'm curious, abot document.getElementById('text').innerHTML='data.main.temp'; why did you enclosed it in quotes ? please remove them and try. or return that data from function. – Naruto Jun 11 '17 at 06:20
  • Hello Claies, you are right about this. But the problem is that i have written window.alert in the function fun() and outside the function fun(). The outside alert is working fine but the control seems not to be going inside the fun at all. SO i suppose, that fun() is not to be found anywhere. – akshit bhatia Jun 11 '17 at 06:22
  • @Naruto, with your and claies suggestion i am now returning the data from the function. But the control is still not entering the fun() function. – akshit bhatia Jun 11 '17 at 06:23
  • `fun` is still not returning anything, you're returning something from the anonymous function you pass as a parameter to `getJSON` but not from `fun`. – Titus Jun 11 '17 at 06:26
  • Can you try setting the value inside on "request.on"? document.getElementById('text').innerHTML=data.main.temp; This didn't work? – Naruto Jun 11 '17 at 06:27
  • @Naruto that may not work if the element with ID `text` is not added to the DOM before `request.on` is executed. – Titus Jun 11 '17 at 06:29
  • @Titus, a good point. I have now saved data.main.temp in a variable c defined in starting. And am returning it after the statement: 'request.end();'. – akshit bhatia Jun 11 '17 at 06:31
  • @Naruto, the fun() method is not accessible. Because alert inside the fun() is not working but the alert when written just above the method's definition is working. so It seems that this method is not accessible to the program. – akshit bhatia Jun 11 '17 at 06:33
  • If the function that you pass to `getJSON` is executed *asynchronous* the edits that you've last made won't work either. What you could do will be something like this: `document.addEventListener("onload", function(){ document.getElementById('text').innerHTML=data.main.temp; });` – Titus Jun 11 '17 at 06:34
  • @akshitbhatia: Please bind the click function from JS. and that too after the document is loaded. – Naruto Jun 11 '17 at 06:34
  • @Titus: Yeah, That's actually good way to do it. separating event bindings from html is a good practice. – Naruto Jun 11 '17 at 06:36
  • @titus, with your suggestions, I wrote that statement in the js file as above. And removed the onload call from the index.html. So now everything is accessible but the call to the api is going without the event occuring. what i mean is: that I have not clicked on the text to which onload function was bound. But still the inspect element is showing that I am being returned a json object and that object is not posted on the innerHTML. – akshit bhatia Jun 11 '17 at 06:43
  • Titus, I apologise for my earlier pointless question. I tried it again with few adjustments and it is working. @Titus, Naruto and Claies, I am glad that i trusted on the stackoverflow community, Because of your help, finally I could solve it. Thanks once again to all of you. – akshit bhatia Jun 11 '17 at 06:53
  • I'm glad I could help. Good luck, – Titus Jun 11 '17 at 07:02

0 Answers0