1

我错过了一些我知道的非常基本的东西，但我似乎找不到解决方案。

我很难理解 html 和 Javascript 元素如何交互。我的代码有一些正确的内容，但我知道它还远未正确。我也不确定将javascript代码放在html文件本身中是否重要，或者我是否可以将它保存在外部js文件中并调用它。

无论如何，我正在尝试创建一个待办事项列表。我想： - 将项目存储在我的“列表”数组中 - 在有序列表中显示全部项目 - 允许用户将新项目添加到列表中（通过索引页面上的文本输入）

任何指导将不胜感激

我的代码：

<body>
<div id="wrapper">
<h3></h3>
    <ol id="unfinished">

    <form name="addToList">
    <li><input type="text" id="newItem"></li>
    </form>

    <li></li>

（在我的 js 文件中）

var list = []
var newItem = document.getElementsById("newItem");
4

2 回答 2

4

你需要的是：

  • 新待办事项的“输入”字段
  • 一个列表，例如显示您的项目的“ol”列表
  • 将新项目添加到列表中的按钮
  • 一个监听按钮的事件监听器

举个例子：

<ol id="listforitems">
    <li>Item that is already there</li>
</ol>
<input type="text" id="newlistitem">
<input type="button" id="buttonfornewitem" value="Add to list">

这些已经是最初的几点。魔法现在来自 JS

// event listener that waits for "click" event on the button
document.getElementById('buttonfornewitem').addEventListener('click', function(e) {
    // we create a new element to append it to the list
    var newElement = document.createElement('li');
    // we define the content of the new element to be the value that has been entered in the input-field
    newElement.innerHTML = document.getElementById('newlistitem').value;
    // then we add it to the list
    document.getElementById('listforitems').appendChild(newElement);

    // optional: reset the input field so that you can add another todo-task
    document.getElementById('newlistitem').value = '';
});
于 2013-10-06T13:10:47.873 回答
2

如果您的目标是实现一种将项目插入列表的简单方法，我认为@Zim84 的解决方案非常适合您的需求。

但是，如果你想实现一个 ToDo 列表或类似的东西，我建议你看看TodoMVC在那里可以找到关于那种工作的例子（将项目插入到具有双向绑定的列表中 - 即列表之间同步的项目和输入数据）在普通的 Javascript 和许多其他框架和库中。

于 2013-10-06T13:15:32.973 回答