実現したいこと
ウェブサイトCODEPREPのajaxのindex.htmlを実行すると以下のように表示されるようにしたい。
//input画面に以下のように入力しボタン[タスクを作成する]をクリックする
[#26 Task 26] [タスクを作成する]
//期待する表示結果は以下です
タスクを作成しました
{
"id": "26",
"createdAt": 1719535575,
"title": "#26 Task 26",
"completed": false
}
input画面に入力しボタン[タスクを作成する]をクリックするところまでは出来ています。
クリックすると、
「...読み込み中...」と出ています。
JavaScript基礎Ajax編がよくわからないので再度読み直しと、
再編集をしながらやっています。
１度は表示が出たことがあったので、試行錯誤とコードチェックは終わっています。
サイトのスクリプトではなくて
これは関係なように思われるのですが。
コードはvscodeで編集して、port5500で実行、Google Chromeで表示しています。osはwindows10です。
jQuery
1// index.html 2 3<!DOCTYPE html> 4<html lang="ja"> 5 6<head> 7 <meta charset="UTF-8"> 8 <title>Ajaxの基礎</title> 9 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> --> 10 <script src="https://code.jquery.com/jquery-3.2.1.min.js" 11 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 12 crossorigin="anonymous"></script> 13 <link rel="stylesheet" href="./css/style.css"> 14 <script src="./js/main.js"></script> 15</head> 16<body> 17 18 <!--jQuery.post:1-4--> 19 20 <div id="todo-app"> 21 <input type="text" id="task-title" placeholder="タスク名"> 22 <button type="button" id="task-create" class="button">タスクを作成する</button> 23 <ul id="tasks"></ul> 24 <pre id="log"></pre> 25 </div> 26</body> 27</html> 28 29 30//.js/main.js 31(function ($) { 32 33 const ENDPOINT = "https://challenge-server.code.io/api" 34 35 function renderTasks(tasks) { 36 $('#tasks').empty().append(tasks.map(function (task) { 37 return $('<li></li>') 38 .text('#' + task.id + ' ' + task.title) 39 .addClass('task' + (task.completed ? ' completed' : '')) 40 41 })); 42 } 43 44 $(function () { 45 $('#task-create').on('click', function () { 46 const title = $('#task-title').val(); 47 $('#log').text('...読み込み中...'); 48 $.post(ENDPOINT + '/todos', { title: title }) 49 .then(function (tasks) { 50 logTask(tasks); 51 }); 52 }); 53 54 function logTask(task) { 55 $('#log').text('タスクを作成しました\n' + JSON.stringify(task, null, 2)) 56 } 57 }); 58 59})(jQuery) 60 61 62 63```error 64Google ChromeでF12を押してみるとレコーダーの右に赤い×印で１と出ていて 65マウスを乗せると、「コンソールを開いて１件のエラーを表示」と出ているので、 66コンソールをみると、コンソールの左に「１件の非表示」と出ています。 67どうして表示できるのかわからないので、やり方を教えていただければ幸いです。 68 69 70### 試したこと 71 72一度うまく表示できたこともあり、コードミスが疑われるのですが、 73これ以上何時間かかるのかわからないので、ご教授をよろしくお願いいたします。 74
0 コメント