jQueryを勉強していますが、コードが思ってるように表示できない2

実現したいこと

ウェブサイト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

行動規範の内容に同意します

回答1件

自己解決

コードの誤字による単純ミスでした。
//.js/main.jsの33行目以下の部分を
間違： const ENDPOINT = "https://challenge-server.code.io/api"
正：const ENDPOINT = "https://challenge-server.code-check.io/api"

これでウェブサイトの結果のように表示できました。

投稿2024/06/28 02:51

sanchunaka

総合スコア20