私はこのエラーを受け取りますUncaught TypeError：this.getElementsは関数ではありません

Question

私はいくつかの答えを見ていますが、私はこの問題を解決しようとしています、私は結果を取得していません "Uncaught TypeError：this.getElements is機能ではありません "。コードのこの部分は、リンクの完全なコードです。

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(); 

全コード：https://jsfiddle.net/e6shbnsu/

Answer 1

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

thisはsetTimeoutにwindowを指すようになります。指定した値をthisというコンテキストにするには、.bindを使用します。ウィンドウオブジェクトを指すthis`

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>