將複選框添加到使用JS的HTML div時遇到困難

作爲編程的一個小老鼠，我有一些HTML/JS pHroblems。我正在嘗試創建一個動態複選框列表，您可以在其中添加任務來完成。我已經完成了我的研究，梳理了至少10個網站，出於某種原因，似乎沒有任何工作。我在代碼中找不到任何東西，我嘗試了多種方法。 HTML：將複選框添加到使用JS的HTML div時遇到困難

<!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")); 
}

來源

2013-07-20 Rohan Khajuria

這是更好，如果你彌補HTML和使用腳本，而不是設置手動一切像的createElement，checkbox.type，價值等 – Krishna

您使用的是可變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

來源

2013-07-20 05:00:13 Barmar

您正在使用的提交類型的輸入

。

當你點擊提交按鈕，頁面重載

會發生，你不能看到你的JavaScript代碼的結果

改用

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

來源

2013-07-20 04:56:31

這不加載如果它不是在''

好評!!! :) –

將複選框添加到使用JS的HTML div時遇到困難

回答

相關問題