在同一页面上两次启动自定义JavaScript插件时，如何解决“未捕获的TypeError：tagsInput不是构造函数”错误

Question

I've created a tags input Vanilla JS plugin. It's working fine when I initiate it for the first time. but when I re-initiate for another input tag. It throws this error: Uncaught TypeError: tagsInput is not a constructor .

Working plugin code on Codepen

I've removed the extra code from the plugin for now.

Plugin:

    (function () {
                var tagsInput = function (opts) {
                    this.arr = [];
                    this.input = document.createElement("input");
                    this.wrapper = document.createElement("div");
                    this.options = Object.assign(tagsInput.defaults, opts);
                    this.originalInput = document.getElementById(opts.selector);
                    buildUI(this);
                    addEvents(this);
                }

                function buildUI(tags) {
                    //build UI code here
                }

                function addEvents(tags) {
                    // add events to tags here
                }

                tagsInput.prototype.addTag = function (str) {
                    // add tags code 
                }

                tagsInput.prototype.deleteTag = function (tag, i) {
                    // delete tags code
                }

                tagsInput.prototype.anyError = function (str) {
                    // find errors
                }

                tagsInput.prototype.addData = function (data) {
                    // add prefill data
                }

                tagsInput.defaults = {
                    selector: '',
                    duplicate: false,
                    max: null,
                    wrapperClass: 'tags-input-wrapper',
                    tagsClass: 'tag'
                }
                //make it global
                window.tagsInput = tagsInput;
            })();

When I initialize it two times on the same page it throws an error.

Initializing the plugin:

            var tagsInput = new tagsInput({
                selector: 'demoInput',
                duplicate: false,
                max: 4,
                wrapperClass: 'tags-input-wrapper',
                tagsClass: 'tag'
            });
            tagsInput.addData(["aloo", "bhindi", "tamater"]);

Answer 1

You are assigning tagsInput to a instance of tagsInput . Now when you reference it, It will be an instance of tagsInput not the constructor. You can fix it by changing var tagsInput = new tagsInput({ to something like this: var tagsInputOne = new tagsInput({ or var demoInput = new tagsInput({ .

Hopefully, this helps.

Answer 2

You're reassigning tagsInput to an element constructed by tagsInput - as such this will work exactly once, then because there is no longer any reference to the old tagsInput constructor, it will be garbage collected. Either change the name of the variable:

var demoInput = new tagsInput({...});

Or change tagsInput to be capitalized as is constructor naming convention:

var TagsInput = function(opts) {...}