Ошибка создания неупорядоченного списка с количеством элементов списка, управляемых пользователем.

Question

Я попытался создать функцию, которая будет генерировать количество элементов списка на основе пользовательского ввода из приглашения. Это не работает, хотя я считаю, что это должно произойти.

Я ищу объяснение, что не так с моим кодом, даже если альтернативное решение также предоставляется, если это возможно.

На HTML стороне я вошел <div class="freshList"></div> в организме, так что он может быть подобран функции и список помещен в этом месте

код ниже:

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