前提・実現したいこと
フォームの作成をしております。(TODOリストの作成を想定)
テキストボックスが空欄の時、submitボタンを押すと、その下に「タスクを入力してください」とエラーメッセージを表示します。
再度空欄のままsubmitボタンを押すと、エラーメッセージが同じように表示されるようにしたいです。(重複なし)
空欄を埋め、再度submitボタンを押すと、エラーメッセージが消え、テキストボックスの内容がリスト表示として追加されるようにしたいです。
発生している問題・エラーメッセージ
一度テキストボックスを空欄にしたまま、submitボタンを押すと、エラーメッセージが表示されます。
その後、再度空欄でsubmitボタンを押すと、2個目の同じエラーメッセージが表示されてしまします。(3回目以降も追加されていき、重複し続けます。)
また、その後に空欄を埋め、submitボタンを押すとテキストボックスの内容がリスト表示として追加されますが、エラーメッセージは消えません。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>TODOリスト</title> 7 <link rel="stylesheet" href="css/style.css" type="text/css"> 8 <script src="js/todo.js" charset="utf-8"></script> 9</head> 10 11<body> 12 13 <div class="container"> 14 15 <form action="" method="" id="form"> 16 17 <div id="task-wrap"> 18 <label for="task">内容</label> 19 <input type="text" id="task" value=""><br> 20 </div> 21 22 <input type="button" id="add" value="追加"><br> 23 24 </form> 25 26 <ul id="result"></ul> 27 28 </div> 29 30</body> 31 32</html>
javascript
1(window.onload = function() { 2 'use strict'; 3 4 const add = document.getElementById("add"); 5 const task = document.getElementById("task"); 6 const taskWrap = document.getElementById("task-wrap"); 7 const result = document.getElementById("result"); 8 9 add.addEventListener("click", function(){ 10 if(task.value === ""){ 11 const error = document.createElement('div'); 12 error.className = "error"; 13 error.innerHTML = "タスクを入力してください"; 14 taskWrap.appendChild(error); 15 }else{ 16 const newTask = document.createElement("li"); 17 newTask.className = "newtask"; 18 newTask.textContent = task.value; 19 result.appendChild(newTask); 20 } 21 task.value = ""; 22 }, false); 23 24})();
試したこと
javascript
1(window.onload = function() { 2 'use strict'; 3 4 const add = document.getElementById("add"); 5 const task = document.getElementById("task"); 6 const taskWrap = document.getElementById("task-wrap"); 7 const result = document.getElementById("result"); 8 9 add.addEventListener("click", function(){ 10 if(task.value === ""){ 11 taskWrap.removeChild(error); 12 const error = document.createElement('div'); 13 error.className = "error"; 14 error.innerHTML = "タスクを入力してください"; 15 taskWrap.appendChild(error); 16 }else{ 17 taskWrap.removeChild(error); 18 const newTask = document.createElement("li"); 19 newTask.className = "newtask"; 20 newTask.textContent = task.value; 21 result.appendChild(newTask); 22 } 23 task.value = ""; 24 }, false); 25 26})();
以上を試した結果、Uncaught ReferenceError: error is not defined at HTMLInputElement.<anonymous>という エラーが以下の最後の行に返ってきました。
javascript
1add.addEventListener("click", function(){ 2 if(task.value === ""){ 3 taskWrap.removeChild(error);
以上、どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/27 13:00
2018/09/27 13:03
2018/09/27 13:32 編集
2018/09/27 13:39
2018/09/27 13:41
2018/09/27 13:42
2018/09/27 13:43
2018/09/27 13:55
2018/09/27 13:58