Want to use Clippy.JS' agent object outside of load function

Question

I am using Clippy.JS, this is a fun little Javascript library that resurrects Microsofts assistant.

Say I wish to summon the wizard Merlin:

clippy.load('Merlin', function(agent){
    // do anything with the loaded agent
    agent.show();
    agent.moveTo(100,100);
    agent.speak("Arthur, you are the chosen one to slay the dragon");
});

This works and is easy to implement. The problem arises when I want to move Merlin around:

$( "#target" ).click(function() {
     agent.moveTo(333,333);
}); 

The agent object is not inititalized in this scope and I don't know how to retrieve the agent object once it is loaded.

The console gives this error:

Uncaught ReferenceError: agent is not defined 

Answer 1

agent is not a global variable and is only available within your agent callback function.

To get around this you need to make a create a variable outside of the callback function and then use this to action the agent globally.

The following should work.

//define the personal agent outside the callback function
let merlin;

clippy.load('Merlin', function(agent){
    merlin = agent;
    merlin.show();
    merlin.moveTo(100,100);
    merlin.speak("Arthur, you are the chosen one to slay the dragon");
});

$( "#target" ).click(function() {
     merlin.moveTo(333,333);
});