プロジェクト：クリアボタン

CoddyのDjangoジャーニー「JSON API」セクションの一部。レッスン 17/19。

エンドポイントは動作します。次はホームページにボタンを追加します。新しい app.js の準備ができました。最後の行でイベントを設定しています。

document.getElementById("clear-done").addEventListener("click", clearDone);

addEventListener("click", clearDone) は、その要素がクリックされるたびに clearDone を実行します。clearDone はエンドポイントに POST リクエストを送信し、"Cleared " + result.deleted + " done tasks." を id が message の要素に書き込み、ページに新しい状態が表示されるように、showSummary() と showTasks() を再度呼び出します。スクリプトが id を決めるため、ページ側もそれに合わせる必要があります。

チャレンジ

中級

新しい app.js を読み、ホームページに次のものを追加します。

スクリプトが操作を待ち受けるボタン。表示する文言は Clear done tasks です。
メッセージを表示する要素。

Run を押してボタンをクリックします。メッセージには削除されたタスクの数が表示され、「銀行に電話する」はリストから消えます。

自分で試してみよう

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
    <p id="summary"></p>
    <ul id="task-list"></ul>
    <script src="{% static 'tasks/app.js' %}"></script>
</body>
</html>