私はCodepenのJavascriptで、フォーム入力を受け取り、それを順序付けられていないリストに追加するイベントハンドラーを作成しています。テストしようとすると、「badpath / boomboom / v2 / index.html」エラーメッセージが表示されます。このエラーが私のコードの結果なのか、Codepenの問題なのかわかりません。誰かがこれを修正する方法を教えてもらえますか?
このエラーが何を意味するのかわからないので、何を試すべきかわかりません。
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>
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
}
これが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);
}
})();
コードは、https://codepen.io/raquelocasio/pen/XwwKLZのペンでも表示できます。
フォームフィールドにテキストを入力してボタンをクリックすると、エラーが表示されます。
期待される出力は、フォームフィールドに入力されたテキストを新しいリストアイテムとして追加できることです。ヘルプやポインタをいただければ幸いです。
<form>
Codepenでタグを使用したときに、同様の問題が発生しました。<form>
タグをタグに切り替えた<div>
ところ、エラーはなくなりました。
これを試すことができますか?
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加