用用戶輸入控制的列表項數量創建無序列表

Question

我試圖做一個函數，根據用戶輸入的提示生成許多列表項。儘管我認爲它應該，但它不起作用。

即使在可能的情況下也提供了備用解決方案時，我正在尋找解釋我的代碼出了什麼問題。

在我已經在體進入<div class="freshList"></div>，以便它可以通過函數被拾起，並在列表放置在該位置

代碼的HTML側低於：

function makeAList() 
{ 
var freshList = document.getElementsByClassName("freshList"); 
var listLength = prompt("Enter number of list items"); 

var listString = "<ul>"; 
for (var i=0; i < listLength; i++) 
{ 
    listString+= "<li>"+"</li>" 

} 
listString += "</ul>" 
document.innerHTML = listString; 
} 

makeAList(); 

// end code 

現在只有這樣，我才能夠得到這個工作是意外的，當在代碼中的各個點使用document.Write方法來看看工作是什麼（我先試着控制檯日誌，它表示函數被調用並且循環正在進行但沒有輸出，所以我轉而使用doc.write）。我用document.Write（listString）;這是能夠強行打印到屏幕上的子彈點，但這不是我的願望。我希望它在HTML中不只是印在屏幕上（以便我可以用我製作的其他功能來操作它）。

總而言之，我想做一系列的功能來執行以下操作：詢問用戶是否想創建一個新列表。調用makeNewList函數，它會提示用戶輸入項目的數量。然後詢問用戶是否希望編輯列表並使用每個列表項的新提示調用editList函數。最後在每個點上留下帶有用戶輸入的項目符號點的輸出。我確信這是一個荒謬的想法，沒人會用，但對我自己來說，嘗試一個我有的東西而不是功能性的東西更是一個教訓。下面全（未遂）代碼：

function makeAList() 
{ 
var freshList = document.getElementsByClassName("freshList"); 
var listLength = prompt("Enter number of list items"); 

var listString = "<ul>"; 
for (var i=0; i < listLength; i++) 
{ 
    listString+= "<li>"+"</li>" 
} 
listString += "</ul>" 
document.innerHTML = listString; 
} 

makeAList(); 


function editAList() { 
var list = document.getElementsByTagName("li"); 
    for (var i = 0; i < list.length; i++) 
     { 
      list[i].innerHTML = prompt("Place list text below","") 
     } 

function checkList(){ 
var resp1 = confirm("Would you like to make a new list?") 
if(resp1 == true) 
{ 
    makeAList(); 
} 
else 
{ 

} 
if(resp1 === false){ 
    var resp2 = prompt("Would you like to edit an existing list instead?") 
} 
else if(resp2 === true){ 
    editAList(); 
} 
else{ 
    alert("You have chosen not to make a new list or edit an existing one") 
} 

} 

checkList(); 

Answer 1

我的朋友看了我的代碼，並進行了一些修改，以及與我出了錯地方詳細的評論。對於任何未來看到這個問題的人來說，這是他的迴應。所有信貸給他，但我不知道他的堆棧溢出處理標記他。下面

Here is his js bin updated and heavily commented code

代碼的情況下，鏈接模具：

// hi 
// i've changed a few things, i've left the original code in comments (//) 

function makeAList() 
{ 
// what does the following code return? a single element? a list of elements? 
//var freshList = document.getElementsByClassName("freshList") 
var freshList = document.getElementById("freshList"); 
var listLength = prompt("Enter number of list items"); 

// var listString = "<ul>"; 
// you can create a 'ul' element and append the list string later 
// https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append 
var ul = document.createElement('ul'); 
ul.setAttribute('id', 'theList'); 
// there's an even shorter way of doing all this, but since you're starting   out, we can save that for later 
for (var i=0; i < listLength; i++) 
{ 
//i would probably append here too, but just demonstrating insertAdjacent 
ul.insertAdjacentHTML('beforeend', '<li></li>'); 
} 
// document.innerHtml = listString //this was the reason why this function didn't work 
// document has no inner html, instead, you want to append the list to the .freshList div that you created 
// and then append that to the listOfLists that you queried 

// the reason why we don't want to manually set innerHTML is because the DOM has to be reparsed and recreated 
// every time innerHTML is set. if you have 1000s of lists, this would be extremely slow 
// there are DOM apis that create and insert html elements much more faster and efficient (appendChild) 
// if you want to create html elements as strings, as you have done previously, use insertAdjacentHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML 
// it is faster and more efficient 
freshList.appendChild(ul); 
} 

makeAList(); 


function editAList() { 
var list = document.getElementsByTagName("li"); 
// there's a much more efficient way to do this, but keep this here for now 
var insertText = function(i) { 
var input = prompt("Place list text below", ""); 
console.log(i); 
list[i].append(input); 
} 

for (var i = 0; i < list.length; i++) 
{ 
// why would we use settimeout? http://www.w3schools.com/jsref/met_win_settimeout.asp 

setTimeout(insertText.bind(null, i), 1000); // why bind?  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 
} 
} 

editAList(); 

// function checkList(){ 
// var resp1 = confirm("Would you like to make a new list?") 
// if(resp1 == true) 
// { 
//  makeAList(); 
// } 
// else 
// { 

// } 
// if(resp1 === false){ 
//  var resp2 = prompt("Would you like to edit an existing list instead?") 
// } 
// else if(resp2 === true){ 
//  editAList(); 
// } 
// else{ 
//  alert("You have chosen not to make a new list or edit an existing one") 
// } 

// } 

// checkList();