0

プログラミングの初心者として、HTML/JS の pH の問題を抱えています。完了するタスクを追加できる動的なチェックボックス リストを作成しようとしています。私は調査を行い、少なくとも 10 の Web サイトをくまなく調べましたが、何らかの理由で何も機能していないようです。コードに何も見つからず、複数のアプローチを試しました。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必要があり、チェックボックスにs を指定しないため、ラベルが機能していませんid。チェックボックスを単にラベルで囲むと、結果の HTML は次のようになります。

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

これは演習として残しておきます。

JSFIDDLE

于 2013-07-20T05:00:13.963 に答える