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

无法创建无序列表，其中包含由用户输入控制的列表项数

1 个答案: