0

作为一个编程菜鸟，我遇到了一些 HTML/JS pHroblems。我正在尝试制作一个动态复选框列表，您可以在其中添加要完成的任务。我已经完成了我的研究，梳理了至少 10 个网站，但由于某种原因，似乎没有任何效果。我在代码中找不到任何东西，我尝试了多种方法。HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List
</title>
<link href="Main Page Styling.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJavascript.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/aladin:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>
  <p>To-Do List</p>
</header>
<input type="text" id = "checkboxName">
<input type="submit" value="Add New Task" onClick="addTask()" id = "taskAdder">
<div id="toBeDone"></div>
</body>
</html>

JS：

var addTask = function () {

    /*var newCheckBox = document.createElement('input');
    var checkboxText = document.getElementById("checkboxName").value;
    newCheckBox.type = 'checkbox';
    newCheckBox.value = (checkboxText + '<br/>');

    var parentElement = document.getElementById("toBeDone");
    parentElement.appendChild(newCheckBox);*/



    /*var newCheckbox = document.createElement("input");
    newCheckbox.type = "checkbox";
    var checkboxTextNode = document.createTextNode(document.getElementById("checkBoxName").value);
    newCheckbox.appendChild(checkboxTextNode);

    document.getElementById("toBeDone").appendChild(newCheckbox);*/

    var newCheckbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.value = document.getElementById("checkboxName").value;
    document.getElementById("toBeDone").appendChild(newCheckbox);

    var label = document.createElement('label');
    label.htmlFor = document.getElementById("checkboxName").value;
    label.appendChild(document.createTextNode(document.getElementById("checkboxName").value));

    document.getElementById("toBeDone").appendChild(label);
    document.getElementById("toBeDone").appendChild(document.createElement("br"));
}
4

2 回答 2

1

您在newCheckbox创建元素并将其附加到 DIV 时使用该变量，但checkbox在您设置类型和值时。

var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.value = document.getElementById("checkboxName").value;
document.getElementById("toBeDone").appendChild(newCheckbox);

您的标签不起作用，因为该for属性必须与复选框的匹配id，并且您永远不会给您的 checkboxes id。如果您只是将标签包裹在复选框周围会更好，因此生成的 HTML 如下所示：

<label><input type="checkbox" value="whatever">whatever</label>

我会把这个留给你做练习。

JSFIDDLE

于 2013-07-20T05:00:13.963 回答
0

您正在使用提交类型输入。

当您单击提交按钮时，页面会重新加载，并且您看不到 javascript 代码的结果

改用按钮

<input type="button" value="Add New Task" onClick="addTask()" id = "taskAdder">
于 2013-07-20T04:56:31.627 回答