初学者,请耐心等待。我正在尝试编写一个代码,在单击按钮时动态创建嵌套div。它根本没有成功。我知道问题出在views对象中,但我不太确定bug是什么。我已经尝试了所有我能想到的。谢谢!
var views = {
displayCodo: function(){
var codosUl = document.querySelector("div");
codosUl.innerHTML = "";
function iterObj(obj){
var codoDiv = document.createElement("div");
for (var key in obj){
codosUl.appendChild(codoDiv);
if(key === "codoText"){
var codoTextWithCompletion="";
codoTextWithCompletion = obj[key];
codoDiv.textContent = codoTextWithCompletion;
codoDiv.appendChild(views.createAddButton());
}
var nestedDiv = document.createElement("div");
codoDiv.append(nestedDiv)
codoDiv = nestedDiv;
if (obj[key] !== null && typeof obj[key] === "object") {
// Recurse into children
iterObj(obj[key]);
}
}
}
iterObj(codoList.codos)
},
createAddButton: function(){
var addButton = document.createElement("button");
addButton.textContent = "add";
addButton.className = "addButton";
return addButton;
},
createInputElement: function(position){
var inputElement = document.getElementById("createInputElement");
codoList.addCodo(position, inputElement.value);
inputElement.value ="";
views.displayCodo()
},
createSubmitButton: function(){
var submitButton = document.createElement("button");
submitButton.textContent = "submit";
submitButton.className = "submitButton";
return submitButton;
},
setUpEventListeners: function(){
var codosUl = document.querySelector("div");
codosUl.addEventListener("click", function(event){
var elementClicked = event.target;
if (elementClicked.className==="addButton"){
elementClicked.insertAdjacentHTML("afterend", "<input id=createInputElement type=text>")
elementClicked.insertAdjacentElement("afterend", views.createSubmitButton());
}
else if (elementClicked.className === "submitButton"){
views.createInputElement(eval("codoList." + (findPropPath(codoList,elementClicked.parentElement.firstChild.data))))
}
})
}
};
views.setUpEventListeners()