Q&A
丁寧なご回答ありがとうございます！
javascriptの方の問題かと思っていたので教えていただき、大変助かりました。
前提・実現したいこと
超初心者です。
javascriptでTo Doリストを作成しています。
下記のコードでエラーはでませんが、フォームへ入力したタスクは一瞬見えた後消えてしまい、リストに追加されません。どうしたらきちんと表示されるのでしょうか？
プラウザはchromeで見ています。
初歩的な質問で申し訳ありませんが、よろしくお願いいたします。
該当のソースコード
＞javascript
'use strict';
const addtasktrigger = document.getElementsByClassName("jstasktrigger")[0];
const addtaskvalue = document.getElementsByClassName("jstaskvalue")[0];
const addtasklist = document.getElementsByClassName("jstasklist")[0];
addtasktrigger.addEventListener('click',tuika);
function tuika(){
const naiyou = addtaskvalue.value;
const listitem = document.createElement('li');
listitem.innerText = naiyou;
addtasklist.appendChild(listitem);
};
＞html
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="todo.css">
<title>sample03_01</title>
</head>
<body>
<h1>To Doリスト</h1>
<ul class=jstasklist></ul>
<form>
<input class="jstaskvalue" type="text" placeholder="今日の予定">
<button class="jstasktrigger">追加</button>
</form>
</html><script src="todo.js"> </script> </body>
試したこと
回答2件
0
<button>にtype="button"属性を加えたら良いと思います。
そうしないとデフォルトでtype="submit"なので、クリックしたときフォームのデータを送信しようとし、送信先が無いのでエラーになります。
投稿2021/05/09 07:21
総合スコア8402
0
ベストアンサー
以下の変更で改善されるのではないでしょうか。
html
1<button class="jstasktrigger">追加</button>
↓
html
1<button class="jstasktrigger" type="button">追加</button>
フォームのデータをサーバーへ送信するためのボタンでなければ、 type="button" を指定するように心がけてください。
（MDN Web Docs の該当項目）
投稿2021/05/09 07:20
総合スコア708
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/09 12:59