質問編集履歴

1 lo

warabimoti

warabimoti score 8

2016/08/12 19:37  投稿

javascriptでtodoリストアプリ作成で質問です。
ai
はじめまして。プログラミングの勉強をしようと思い、参考書を見ながらtodoリストアプリを作っていて、その中で同じ内容の登録を禁止できる機能を付けたいのですが、調べてコードを書いても機能してくれません。どこにどんな風にコードを書けば分かる方がいましたら、ご教授お願いいたします。よろしくお願いいたします。
###該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Todo Application</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" media="all"> 
</head>
<body>
<h1>Todo リスト</h1> 
<form class="todoForm">
<span class="small">※20字まで</span>
<input type="text" class="todoInput" maxlength="20" placeholder="入力して下さい" required>
<input type="submit" value="追加">
</form>
<ul class="todoList"></ul>
</body>
</html>
```
```javascript
$(function() {
var $list = $('.todoList');
var $input = $('.todoInput');
var storage = window.localStorage;
/*
* Todoを追加する関数
*/
function addTodo(text, isComplete) {
   // リストアイテムをつくる
   var $li = $('<li>');
   var $text = $('<span class="text">').text(text);
   var $checkbox = $('<input type="checkbox">');
   var $remove = $('<span class="remove">削除</span>');
   $li.append($checkbox).append($text).append($remove);
   // 完了済みの場合の処理
   if (isComplete) {
       $li.addClass('complete');
       $checkbox.attr('checked', true);
   }
   // チェックボックスをクリックしたときの処理
   $checkbox.click(function() {
       if ($(this).is(':checked')) {
           $li.addClass('complete');
       }
       else {
           $li.removeClass('complete');
       }
       updateStorage();
   });
   // 削除ボタンをクリックしたときの処理
   $remove.click(function() {
       if (window.confirm('削除してよろしいですか?')) {
           $li.fadeOut(function() {
               $li.remove();
               updateStorage();
           });
       }
   });
   // リストに追加する
   $list.append($li);
}
/*
* ストレージを更新する関数
*/
function updateStorage() {
   var list = [];
   // 現在のリスト情報を全て取得する
   $list.find('li').each(function() {
       var $item = $(this);
       // テキストと完了かどうかを保存する
       list.push({
           text: $item.find('.text').text(),
           complete: $item.hasClass('complete')
       });
   });
   // 文字列にしてストレージに保存
   storage['todo.list'] = JSON.stringify(list);
}
// フォームを送信したときの処理
$('.todoForm').bind('submit', function(event) {
   // フォームのデフォルトの動作を止める
   event.preventDefault();
   // テキストボックスに入っている文字列を取得
   var text = $input.val();
   
   // todoを追加
   addTodo(text);
   // テキストボックスを空にする
   $input.val('');
   // ストレージの更新
   updateStorage();
});
// 初期表示時にストレージからデータを復元する処理
var storageList = storage['todo.list'];
if (storageList) {
   JSON.parse(storageList).forEach(function(item) {
       addTodo(item.text, item.complete);
   });
}
});
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  • JavaScript

    36526 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C++

    8251 questions

    C++はC言語をもとにしてつくられた最もよく使われるマルチパラダイムプログラミング言語の1つです。オブジェクト指向、ジェネリック、命令型など広く対応しており、多目的に使用されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る