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;
}
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.
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.