How to fix this undefined Variable output;

How to fix this undefined Variable output;
0

#1

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;

}

#2

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] = ...

#3

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.


#4

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.


#5

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;

}

#6

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?


#7

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

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


#8

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?


#9

Yeah, I do.

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


#10

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.


#11

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.


#12

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