Message d'erreur de chemin d'accès incorrect /boomboom/v2/index.html lors de la tentative d'affectation des gestionnaires d'événements
J'écris un gestionnaire d'événements en Javascript sur Codepen qui prendra une entrée de formulaire et l'ajoutera à une liste non ordonnée. Lorsque j'essaye de tester, j'obtiens un message d'erreur "bad path /boomboom/v2/index.html". Je ne sais pas si cette erreur est le résultat de mon code ou un problème avec Codepen. Quelqu'un peut-il m'indiquer comment résoudre ce problème?
Je ne sais pas quoi essayer car je ne sais pas ce que signifie cette erreur.
Voici le HTML:
<div class="card">
<div class="card-body">
<h3 class="card-title">Today's To Do List</h3>
<form id="todo-form">Week 5: To Do List
<div class="form-group">
<input type="text" class="form-control" id="todo-Week 5: To Do Listinput" placeholder="What else do you need to do?">
</div>
<div class="form-group">
<input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
</div>
</form>
</div>
<ul class="list-group list-group-flush" id="todo-ul">
<li class="list-group-item">Pick up groceries
<i class="fas fa-trash-alt"></i>
</li>
<li class="list-group-item">Finish essay
<i class="fas fa-trash-alt"></i>
</li>
<li class="list-group-item">Soccer @ 5:00
<i class="fas fa-trash-alt"></i>
</ul>
Voici le CSS:
body
{
background-color: #34495e;
font-family: 'Lato', sans-serif;
}
button {
margin: 0 auto;
float: right;
}
.centered {
margin: 0 auto;
width: 80%
}
.card {
margin: 50px auto;
width: 18rem;
}
i{
float:right;
padding-top:5px
}
Voici le Javascript:
(function(){
//add event handler to form button
formButton = document.querySelector("#todo-btn");
formButton.onclick = addNewTodo;
function addNewTodo() {
//get value of form field
newTask = document.getElementById("todo-Week 5: To Do Listinput").value;
//console.log(newTask);
//create new ul list item element
const newItem = document.createElement('li');
const newItemContent = document.createTextNode(newTask);
//add new li element item to ul
newItem.appendChild(newItemContent);
document.getElementById("todo-ul").appendChild(newItem);
}
})();
Le code peut également être consulté sur mon stylo à https://codepen.io/raquelocasio/pen/XwwKLZ
Lorsque j'entre du texte dans le champ du formulaire et clique sur le bouton, l'erreur s'affiche.
La sortie attendue doit être en mesure d'ajouter le texte entré dans le champ de formulaire en tant que nouvel élément de liste. Toute aide ou pointeur serait grandement apprécié.
Il semble que cette erreur (qui est agréablement déroutante - ou agréablement nommée) soit signalée lorsqu'un <form> est soumis dans le bac à sable. CodePen lui-même est une application Web (construite sur Rails je crois) avec des formulaires - et je ne sais pas comment tout cela se joue - mais cela a probablement une certaine portée pour ceux-ci - et ne peut pas simplement avoir des formulaires soumis à leur serveur par ses nombreux utilisateurs.
Voici un exemple d'erreur: https://codepen.io/sheriffderek/pen/VwLQjZY
Nous les avons rencontrés plusieurs fois - mais cela a toujours été de notre faute - et lorsque nous avons essentiellement essayé de soumettre un formulaire - à un serveur auquel nous n'avons pas accès: (ce qui peut être inattendu - mais logique)
et
sont les messages que nous avons vus. Est-ce à dire "merde"? ; ) .... ou...
et voici la documentation pour empêcher la soumission de formulaire par défaut https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
et comment l'utiliser dans un stylo: https://codepen.io/sheriffderek/pen/abOqZoM
element.addEventListener('click', function(event) {
event.preventDefault();
// some instructions etc.
});
Nous devons le dire aux gens sur place - et peut-être qu'ils pourront détecter le type d'erreur de soumission et diriger les gens vers des informations sur les raisons pour lesquelles cela se produit. :)
