Problème lors de la création d'une liste non ordonnée avec le nombre d'éléments de la liste contrôlés par l'entrée de l'utilisateur

Question

J'ai essayé de créer une fonction qui générerait un certain nombre d'éléments de liste en fonction de l'entrée de l'utilisateur. Cela ne fonctionne pas bien que je le crois.

Je cherche une explication de ce qui ne va pas avec mon code même si une solution alternative est également fournie, si possible.

Du côté HTML je suis entré <div class="freshList"></div> dans le corps afin qu'il puisse être repris par la fonction et ont la liste placée à cet endroit

Code

est ci-dessous:

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 

Maintenant, la La seule façon d'obtenir ce résultat est par accident lors de l'utilisation du document. Méthode d'écriture à différents points du code pour voir ce qui fonctionnait (j'ai d'abord essayé le journal de la console qui disait que la fonction était appelée mais aucune sortie ne venait donc je suis passé à doc.write à la place). J'ai utilisé document.Write (listString); et c'était capable d'imprimer de force les points de balle sur l'écran mais ce n'est pas mon désir. Je le veux dans le HTML non seulement imprimé sur l'écran (de sorte que je peux le manipuler avec d'autres fonctions que j'ai faites). Au total, j'ai voulu faire une série de fonctions pour effectuer l'action suivante: Demander si l'utilisateur souhaite faire une nouvelle liste. Appelez la fonction makeNewList qui invite l'utilisateur pour le nombre d'éléments. Demandez ensuite à l'utilisateur s'il souhaite modifier la liste et appeler la fonction editList avec de nouvelles invites pour chaque élément de la liste. Enfin, en laissant une sortie de # de points de balle avec l'entrée de l'utilisateur sur chaque point. Je suis sûr que c'est une idée ridicule que personne n'utiliserait mais c'était plus une leçon pour moi d'essayer une idée que j'avais plutôt que quelque chose de fonctionnel. Complète (tentative) Code ci-dessous:

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

Mon ami a regardé mon code et a fait quelques changements, ainsi que des commentaires détaillés avec les endroits où je suis allé mal. Pour ceux qui considèrent cette question à l'avenir, voici sa réponse. Tout le crédit à lui mais je ne connais pas son stack overflow gérer pour le taguer.

Here is his js bin updated and heavily commented code

code ci-dessous dans le cas où un lien meurt:

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