va2ron1 va2ron1 - 6 months ago 20
HTML Question

I'm getting this error Uncaught TypeError: this.getElements is not a function

I look into a few answers but I'm not getting any results, I'm trying to fix this issue "Uncaught TypeError: this.getElements is not a function". This part of the code, full code in the link.

var SIDEBAR = new function() {
this.on = function(nameElement){
this.menu = nameElement;
return this;
};
/*more code*/
this.getElements = function() {
/*more code*/
return [];
};
/*more code*/
this.addElements = function() {
var elementsData = this.getElements();
/*more code*/
};
}();

var sid = SIDEBAR.on('test');
sid.load();


Full code: https://jsfiddle.net/e6shbnsu/

Answer

The value of this is determined by how a function is called.

this will point to window in setTimeout. Use .bind to have specified values as this context.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

function inElectron() {
  return navigator.userAgent.indexOf("Electron") != -1;
}

var dataManager = {
  getItem: function(key, local) {
    if (inElectron() || local == 1)
      return localStorage.getItem(key);
    else
      return sessionStorage.getItem(key);
  },
  setItem: function(key, item, local) {
    if (inElectron() || local == 1)
      localStorage.setItem(key, item);
    else
      sessionStorage.setItem(key, item);
  }
};

var SIDEBAR = new function() {
  this.on = function(nameElement) {
    this.menu = nameElement;
    return this;
  };
  this.load = function() {
    this.currentElement = 0;
    this.refreshElements();
  };
  this.setAddElementName = function(name) {
    this.addElementName = name;
  };
  this.setNewElementName = function(name) {
    this.newElementName = name;
  };
  this.getElements = function() {
    var elementsData = dataManager.getItem(this.getDataKey);
    if (typeof elementsData !== 'undefined' && elementsData !== null) {
      return JSON.parse(elementsData);
    }
    return this.getPreloadData();
  };
  this.setDataKey = function(key) {
    this.dataKey = key;
  };
  this.getDataKey = function() {
    if (this.dataKey) {
      return this.dataKey;
    }
    return "SideBar" + this.menu;
  };
  this.setPreloadData = function(dataArray) {
    this.preloadData = dataArray;
  };
  this.getPreloadData = function() {
    if (typeof this.preloadData !== 'undefined' && this.preloadData !== null) {
      return this.preloadData;
    }
    return [];
  };
  this.getCurrentElement = function() {
    var elementsData = getElements;
    return elementsData[currentElement];
  };
  this.refreshElements = function() {
    window.setTimeout(function() {
      this.clearElements();
    }.bind(this), 1);
    //outer `this` context is bound to the handler
    window.setTimeout(function() {
      this.addElements();
    }.bind(this), 2);
  };
  this.deleteElement = function() {
    var newArr = [];
    var elementsData = this.getElements();
    for (var i = 0, l = elementsData.length; i < l; i++) {
      if (i != index) {
        newArr.push(elementsData[i]);
      }
    }
    dataManager.setItem(this.getDataKey, JSON.stringify(newArr));
  };
  this.addElements = function() {
    var elementsData = this.getElements();
    var menuNode = document.getElementById(this.menu);

    console.log(elementsData);

    for (var i = 0; i < elementsData.length; i++) {
      var li = document.createElement("li");
      var div = document.createElement("div");
      li.value = i;

      div.classList.add("list");

      var p = document.createElement("p");
      p.id = "textBlock";
      p.style.display = "inline";
      p.setAttribute("contentEditable", false);

      p.appendChild(document.createTextNode(elementsData[i].name));
      div.appendChild(p);

      var obj = getObject();
      console.log(obj);


      div.onclick = function(e) {
        e.stopImmediatePropagation();
        if (this.querySelector("#textBlock").contentEditable == "false") {
          this.currentElement = this.parentNode.value;
          elementsData = this.getElements();
          document.getElementById("prompt").innerHTML = elementsData[this.parentNode.value]["data"];
          document.querySelector("#wrapper").classList.toggle("toggled");
        }
      };


      var span2 = document.createElement("span");
      span2.id = "deleteMode";
      span2.classList.add("glyphicon");
      span2.classList.add("glyphicon-minus");
      span2.onclick = function(e) {
        e.stopImmediatePropagation();
        deleteItem(this.parentNode.parentNode.value);
        window.setTimeout(this.refreshElements, 1);
      };
      span2.style.display = "none";
      div.appendChild(span2);


      var span = document.createElement("span");
      span.id = "editMode";
      span.classList.add("glyphicon");
      span.classList.add("glyphicon-pencil");
      span.onclick = function(e) {
        e.stopImmediatePropagation();
        // get href of first anchor in element and change location
        for (var j = 0; j < menuNode.length; j++) {
          menuNode[j].classList.add("disabled");
        }
        this.style.display = "none";
        this.parentNode.querySelector("#deleteMode").style.display = "";
        this.parentNode.classList.add("editableMode");
        this.parentNode.classList.remove("disabled");
        var textBlock = this.parentNode.querySelector("#textBlock");
        textBlock.setAttribute("contentEditable", true);
        this.placeCaretAtEnd(textBlock);

        textBlock.onkeydown = function(e) {
          if (e.keyCode == 13) {
            e.stopImmediatePropagation();

            var text = this.innerHTML.replace("&nbsp;", '');
            text = text.replace("<br>", '');
            if (text.length > 0) {

              this.innerHTML = text;
              elementsData[this.parentNode.parentNode.value]['name'] = text;
              dataManager.setItem("IFTeleprompterScripts", JSON.stringify(elementsData));

              for (var j = 0; j < menuNode.length; j++) {
                menuNode[j].classList.remove("disabled");
              }

              this.parentNode.classList.remove("editableMode");
              this.setAttribute("contentEditable", false);
              this.parentNode.querySelector("#editMode").style.display = "";
              this.parentNode.querySelector("#deleteMode").style.display = "none";
            } else {
              return false;
            }


          } else if (e.keyCode == 8) {
            if (textBlock.innerHTML.length - 1 === 0) {
              textBlock.innerHTML = "&nbsp;";
            }
          }
          return true;
        };

        return false;
      };

      div.appendChild(span);
      li.appendChild(div);
      scriptsNode.appendChild(li);
    }

    var li = document.createElement("li");
    var div = document.createElement("div");
    var span2 = document.createElement("span");
    span2.id = "addMode";
    span2.classList.add("glyphicon");
    span2.classList.add("glyphicon-plus");
    div.appendChild(span2);

    var p = document.createElement("p");
    p.id = "textBlock";
    p.style.display = "inline";
    p.setAttribute("contentEditable", false);

    if (typeof this.addElementName !== 'undefined' && this.addElementName !== null)
      p.appendChild(document.createTextNode(" " + this.addElementName));
    else
      p.appendChild(document.createTextNode(" Add " + this.menu));
    div.appendChild(p);

    li.onclick = function(e) {
      e.stopImmediatePropagation();
      var newPushElementName = "New " + this.menu;
      if (typeof this.addElementName !== 'undefined' && this.addElementName !== null) {
        newPushElementName = this.addElementName;
      }
      elementsData.push({
        "name": newPushElementName,
        "data": ""
      });
      dataManager.setItem(this.getDataKey, JSON.stringify(elementsData));
      this.refreshElements();
    };

    li.appendChild(div);
    menuNode.appendChild(li);
  };
  this.placeCaretAtEnd = function(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
      var textRange = document.body.createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(false);
      textRange.select();
    }
  };
}();

var sid = SIDEBAR.on('test');
sid.load();
<ul class="sidebar-nav" id="test">
</ul>

Comments