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

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

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

На стороне 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();

javascript function html getelementsbyclassname getelementbyid
person vampiire    schedule 10.02.2017    source источник
comment
Проблема в следующем: document.innerHTML = listString; document не имеет свойства .innerHTML. Похоже, вы хотели поместить список в элемент freshList, но не сделали этого. Если это так, вы бы сделали freshList[0].innerHTML = listString   -  person    schedule 10.02.2017
comment
здесь помещены пробелы, потому что иначе они не отображались для моего сообщения. Если вы используете символы обратной галочки ` для цитирования своего кода, он не будет интерпретироваться как HTML. (Я отредактировал ваш вопрос, чтобы исправить его; если вы нажмете редактировать, вы сможете точно увидеть, как это было сделано.)   -  person nnnnnn    schedule 10.02.2017
comment
Кроме того, если вам нужно первое, возможно, единственное, freshList, то лучше будет var freshList = document.querySelector(".freshList"). Он возвращает первое совпадение вместо коллекции, поэтому вы просто делаете freshList.innerHTML = listString.   -  person    schedule 10.02.2017
comment
@squint спасибо за помощь, это была проблема   -  person vampiire    schedule 10.02.2017
comment
@squint, если вы не возражаете, у меня есть несвязанный с этим вопрос. Почему при переполнении стека ваши ответы считаются комментариями, а не ответом? Я часто вижу это с вопросами, на которые я смотрю, и из-за этого форматирование немного сбивает с толку.   -  person vampiire    schedule 10.02.2017
comment
@vampiire: Я делаю это в основном вопреки их глупой, бессмысленной системе репутации, которая порождает высокий уровень мусорных ответов. Нет ничего необычного в том, чтобы сразу же увидеть несколько чисто кодовых, часто посредственных решений, потому что все хотят быть первыми, чтобы получить очки. Я бы предпочел разместить полезные объяснения здесь. Я знаю, форматирование ужасно трудно читать. Так оно и есть.   -  person    schedule 10.02.2017
comment
@прищурился а ладно. Интересно, что для такого популярного инструмента у них жутко запутанная система ответов. Тем более, что он оставляет комментарии свернутыми. Угу, что это такое. Еще раз спасибо за помощь   -  person vampiire    schedule 11.02.2017
comment
Рад, что смог помочь. Удачи!   -  person    schedule 11.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

Мой друг посмотрел мой код и внес некоторые изменения, а также подробно прокомментировал места, где я ошибся. Для тех, кто рассматривает этот вопрос в будущем, вот его ответ. Вся заслуга в нем, но я не знаю его дескриптора переполнения стека, чтобы пометить его.

Вот его js-бин, обновленный и сильно прокомментированный код

Код ниже на случай, если эта ссылка умрет:

// 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();
person vampiire    schedule 10.02.2017