Question

我正在尝试将用户输入添加到数组中。我似乎无法弄清楚如何实现这一目标。我花了好几个小时试图弄明白该做什么。我也希望这个＆＃34;做清单＆＃34;保存到我的本地存储，我同样很沮丧，试图找出这两个问题。

有关如何从用户输入添加到阵列和/或如何将其放入本地存储的任何建议或指导将非常感激。到目前为止我花了相当长的时间。谢谢你的帮助！非常感谢。

的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

如果您不介意使用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中处理得更简单的侦听器

Answer 2

要添加新创建的列表项，只需将theList.push(item)添加到todoList()功能即可。

要将var theList = []数组保存到localStorage，请使用：

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

并使用它来检索localStroage对象：

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

请参阅下面的代码：

＆＃13;

<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> -->

＆＃13;

希望这有帮助。

Javascript待办事项列表应用程序推送到阵列/本地存储

2 个答案: