How to fix this undefined Variable output;

Hi,

I want to pass in the value of the editor instance that is equal to the target element. But ends up getting an undefined variable. Below is my code:

var docs = Array.from(document.querySelectorAll(".doc"));

var ids = [];

var id = null;

var txtarea = null;

var x = null;

var editorInstances = [];


// Add id to the DOM nodes
$(window).on('load', docs, function(e){

    for (var i = 0; i < docs.length; i++) {

        docs[i].setAttribute("id", `editor${i}`);

        id = docs[i].id;

        ids.push(id);

    };

    instantiateEditor(ids);

});


function instantiateEditor(arr){
    arr.forEach(function(item) {
      txtarea = document.getElementById(item);

      editorInstances[item] = new Squire(txtarea, {
        blockTag: "p",
        blockAttributes: { class: "ui_qtext_para" },
        tagAttributes: {
          a: {
            class: "external_link",
            target: "_blank",
            rel: "noopener nofollow",
            "data-qt-tooltip": ""
          }
        }
      });
    });
}

var editor = null;

//find current target element and pass in the editor instance to var editor;
function clickFn(e) {
    x = e.target.id;
    
    editor = editorInstances[x];

    return editor;

}

You try to assign something to editorInstance array as an object prop:

You should assign it as an array item at the certain index:

arr.forEach(function(item, index) {
...
editorInstances[index] = ...

I’m trying to use the ids as keys so that when I call the clickFn(), I can pass the e.target and assign the value to the variable editor.

In function arr.forEach(function(item) ... what is the item?
It the next line you try to assign editorInstances[item] = new..., but previously you declared var editorInstances = []; (array) hence item must be a number (index in the array).

If you want to store something using key and access it using same key you have to use an object, not an array.

Thanks for this. arr refers to the var ids array, which is an array of ids.

I tried var editorInstances = {}; but still I’m not getting an undefined editor after doing this:

var editor = null;

function clickFn(e) {
    x = e.target.id;
    
    editor = editorInstances[x];

    return editor;

}

Have you checked what is an item in the function? Throw it to the console.

Maybe var docs = Array.from(document.querySelectorAll(".doc")); called before window loads, make docs an empty array?

Could you paste link to this project?

item refers to an id stored in the var ids = [];

I’ve got it here: https://jsfiddle.net/5qr3vuLy/

Do you use console in your browser? Check it for errors, then you can be able to track them easier.

First error I can see is:

Uncaught ReferenceError: $ is not defined
    at window.onload

It is jQuery syntax, but it seems you don’t even use it. Am I right?

Yeah, I do.

You’re right, the error above is not related to the code I have.

Well, by saying you don’t even use it I meant that you use this syntax in your code, but you do not use jQuery library. Your option for JS in fiddle is JavaScript + No-Library (pure JS) so I guess you have to load this library first if you want to use it.

I’m not familiar with fiddle, but i believe it must be somewhere in this droplist. Maybe start with this and inspect your code carefully.

I also do not see Squire library loaded…

If you are going to use jQuery try to wrap whole code in

$(document).ready(function() {
      // YOUR CODE
});

and function from $(window).on('load') make self-invoking, then it should trigger as soon as your html part will be ready.

1 Like

I’ll tidy up my code and see what else I can do here to resolve the issue. Thank you so much!