Javascript To Do app /配列/ローカルストレージへのプッシュ

Question

ユーザー入力を配列に追加できるようにしようとしています。私はこれを達成するために行く方法を把握しているように見えることはできません。私は何をすべきかを正確に理解しようと時間を費やしました。私もローカルストレージに保存することを "リストにする"ようにしたいと思っています。私は、これらの問題の両方を理解しようとすることにも不平を感じています。

ユーザの入力から配列を追加する方法や、これをローカルストレージに配置する方法に関するアドバイスや指導は、大変ありがたいです。これまでになってもかなり時間がかかりました。あなたの助けをありがとう！大変感謝しています。

Javascriptを

var theList = []; 

function todoList() { 
    var item = document.getElementById('todoInput').value; 
    var text = document.createTextNode(item); 
    var checkbox = document.createElement('input'); 
     checkbox.type = "checkbox"; 
     checkbox.name = "name"; 
     checkbox.value = "value"; 
    var newItem = document.createElement("li"); 

    newItem.appendChild(checkbox); 
    newItem.appendChild(text); 
    document.getElementById("todoList").appendChild(newItem) 

    return clear(); 
} 

function clear() { 
    todoInput.value = ""; 
} 

console.log(theList); 

HTML

<h1>To Do List:<h1> 
    <input id="todoInput" type="text"> 
    <button type="button" onclick="todoList()">Add Item</button> 
</form> 
<ol id="todoList"> 
</ol> 

<script src="todo.js"></script> 

Answer 1

にはるかに簡単に処理されているリスナーを割り当てることですあなたのtodoList()機能にtheList.push(item)を追加するだけです。

<h1>To Do List:</h1> 
 

 
<input id="todoInput" type="text"> 
 
<button type="button" onclick="todoList()">Add Item</button> 
 

 
<ol id="todoList"> 
 
</ol> 
 

 
<script> 
 
    var theList = []; 
 

 
    function todoList() { 
 

 
    var item = document.getElementById('todoInput').value; 
 
    var text = document.createTextNode(item); 
 
    var checkbox = document.createElement('input'); 
 
    checkbox.type = "checkbox"; 
 
    checkbox.name = "name"; 
 
    checkbox.value = "value"; 
 
    var newItem = document.createElement("li"); 
 

 
    newItem.appendChild(checkbox); 
 
    newItem.appendChild(text); 
 
    document.getElementById("todoList").appendChild(newItem); 
 
    
 
    theList.push(item); // This adds the item to theList[] 
 
    //localStorage.setItem("todoList", JSON.stringify(theList)); // Set localStorage object 
 
    //var storedTodoList = JSON.parse(localStorage.getItem("todoList")); // Get localStorage object 
 

 
    console.log(theList); 
 
    
 
    
 
    return clear(); 
 
    } 
 

 
    function clear() { 
 
    todoInput.value = ""; 
 
    } 
 
    
 
</script> 
 

 
<!-- <script src="todo.js"></script> -->

：以下のスニペットを参照してください

var storedTodoList = JSON.parse(localStorage.getItem("todoList")); 

：

localStorage.setItem("todoList", JSON.stringify(theList)); 

そしてlocalStroageオブジェクトを取得するためにこれを使用する：のlocalStorageの使用にvar theList = []配列を保存するには

これが役立つことを願っています。

Answer 2

あなたはjQueryのは十分に良いことがあり、次の使用してもかまわない場合 - それはに非常に難しいことではありませんいずれかの方法をJavaScriptに変換してください。ここで

は、リストを行うに取り組んでフィドルある - https://jsfiddle.net/makzan/bNQ7u/

$('#add-btn').click(function(){ 
    // get value from #name input 
    var val = $('#name').val(); 
    // append the name to the list 
    $('#list').append("<li>" + val + " <a href='#' class='done-btn'>Done</a> <a href='#' class='cancel-btn'>Cancel Task</a></li>"); 
    // reset the input field and focus it. 
    $('#name').val("").focus(); 
}); 

// correct approach 
$('.done-btn').live('click', function() { 
    $(this).parent('li').addClass('done'); 
});  

$('.cancel-btn').live('click', function() { 
    $(this).parent('li').fadeOut(); 
}); 

あなたが見ることができるように、ロジックは、単に、新たに追加するにはjQueryの