Trouble executing Dialogue Boxes with Button & Keyboard Input

Hello! I’m trying to make Dialogue boxes with both Button and Keyboard inputs. The keyboard inputs work but I’m having trouble integrating both Button and Keyboard inputs together. The little light green character is the placeholder for my “Next Button”. There are also red and blue versions of this character representing “Yes” and “No” buttons respectively.

Although I understand the meaning of the error, I don’t understand what’s causing it. I made sure that the entities were initialized in the script and dragged in the respective entities into the scripts in the editor (parse), but I’m sure I’m missing something. Any help would be appreciated!:

Here is my code, apologies for the messiness!:

/*jshint esversion: 6 */

var Dialogue = pc.createScript('dialogue');

    Dialogue.attributes.add('text', { type: 'entity' });
    Dialogue.attributes.add('textcontent', { type: 'entity' });
    Dialogue.attributes.add('answerYes', { type: 'entity' });
    Dialogue.attributes.add('answerNo', { type: 'entity' });
    Dialogue.attributes.add('yesButton', {type: 'entity'});
    Dialogue.attributes.add('noButton', {type: 'entity'});
    Dialogue.attributes.add('nextButton', {type: 'entity'});

// define story content
   var story = [
  { m: "Welcome to Manis Town!" },
  { m: "The land is sweet and the people are friendly." },
  { question: "Ready to explore? ", answers: [
    { m: "yes", next: "take_yes" },
    { m: "no", next: "take_no" },
  ] },
  { label: "take_yes", m: "Good to hear! Now go look around, explorer!", next: "take_end" },
  { label: "take_no", m: "That's unfortunate. You're kinda stuck here though, so go look around!", next: "take_end" },
  { label: "take_end", m: "See ya!" }

var current_line = 0;
var current_step = story[0];

var answerYes;
var answerNo;

// initialize code called once per entity
Dialogue.prototype.initialize = function() {

    //, this.onKeyDown, this);
    //, this.onKeyUp, this);
    //this.nextButton.button.on('click', this._progressDialogue, this);
    //this.text ="DialogueBox");
    //this.textcontent = this.entity.findByName("Textcontent");
    //this.answerYes = this.entity.findByPath('UI/DialogueBox/AnswerYes');
    //this.answerNo = this.entity.findByPath('UI/DialogueBox/AnswerNo');

// update code called every frame
Dialogue.prototype.update = function(dt) {
    this.talkvariable ='MayorLulu').script.mayorLulu.returnState();
    // console.log('talkvariable is set to '+talkvariable);
    if (talkvariable){
        this.text.enabled = true;
        // while the dialogue isn't finished, step through the dialogue
        while (current_line < story.length){
        // track the step where we're at in the story
        var current_step = story[current_line];
            // if the player presses enter advance in the story
            if ( && this.nextButton.button.on('click', this._progressDialogue, this)){
                // console.log(current_step);
                // execute if the step contains a message (m)
                if (undefined !== current_step.m){
                    this.textcontent.element.text = current_step.m;


                    this.answerYes.enabled = false;
                    this.answerNo.enabled = false;

                    this.yesButton.enabled = false;
                    this.noButton.enabled = false;

                    this.nextButton.enabled = true;

                    if (undefined !== {
                        current_line = => e.label).indexOf(;
                    } else {
                        current_line = current_line + 1;
                // execute if the step contains a question (q)
                else if (undefined !== current_step.question){
                    this.textcontent.element.text = current_step.question;
                    console.log('Were displaying a question here');
                    this.answerYes.enabled = true;
                    this.answerNo.enabled = true;

                    this.yesButton.enabled = true;
                    this.noButton.enabled = true;
            // register yes answer if a question is displayed
            else if (( && (undefined !== current_step.question) && this.yesButton.button.on('click', this._progressDialogue, this)){
                        console.log('key press was registered!');
                        current_line = => e.label).indexOf('take_yes');
            // register no answer if a question is displayed
            else if (( && (undefined !== current_step.question && this.noButton.button.on('click', this._progressDialogue, this))){
                        console.log('key press was registered!');
                        current_line = => e.label).indexOf('take_no');

Dialogue.prototype.progressDialogue = function() {
    this.nextButton.button.on('click', this._progressDialogue, this);, this._progressDialogue, this);

// swap method called for script hot-reloading
// inherit your script state here
// Dialogue.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:

Link to Project Editor: PlayCanvas | HTML5 Game Engine

Hi @cdev,

The reason you are getting that error is because in some instances of the Dialogue.js script, this.text is undefined. For example on your Textcontent entity the script is attached to but doesn’t have any entity referenced for text:


You should either make sure those attributes are always filled or check in code they are available before using them.

1 Like

Hello, thank you for your response! My mistake for that, I filled it in^^; My buttons are still not interactable however, do I have to attach the script to every entity under Dialogue Box or are there mistakes in my script?