Question

作为编程的菜鸟，我有一些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"));
}

Answer 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相匹配，并且您永远不会给出id个复选框。如果您只是将标签包裹在复选框周围会更好，因此生成的HTML看起来像：

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

我会把这作为锻炼给你。

JSFIDDLE

Answer 2

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

当您点击提交按钮页面时会发生重新加载，而您无法看到您的javascript代码的结果

使用按钮

<input type="button" value="Add New Task" onClick="addTask()" id = "taskAdder">

无法使用JS向HTML div添加复选框

2 个答案: