ToDoリストの作成に関する問題

Question

JavaScriptでToDoリストを作成しようとしましたが、私は、エンドユーザによるテキストを挿入しながらコンテンツを追加したい。ここで私のコードを配置しました。ここで

function Add(){ 
    var a, input, ul, ulAttr, li; 
    function button(){ 
     a = document.createElement("button"); 
     a.innerHTML = "Add"; 
     document.body.appendChild(a); 
    } 

    function inputa(){ 
     input = document.createElement("input"); 
     input.type = "text"; 
     input.value = "21"; 
     document.body.appendChild(input); 
    } 

    function ula(){ 
     ul = document.createElement("ul"); 
     ulAttr = document.createAttribute("id"); 
     ulAttr.value = "demo"; 
     ul.setAttributeNode(ulAttr); 
     document.body.appendChild(ul); 

     li = document.createElement("li"); 
     li.innerHTML = input.value; 
     document.ul.appendChild(li); 
    } 

    inputa(); 
    button(); 
    ula(); 
} 

Answer 1

は、あなたのニーズに合わせて変更し、あなたのコードです：

function Add(){ 
 
var a, input, ul, ulAttr, li; 
 
function button(){ 
 
\t a = document.createElement("button"); 
 
\t \t a.innerHTML = "Add"; 
 
\t \t document.body.appendChild(a); 
 
    a.className='add'; 
 
} \t 
 

 
function inputa(){ 
 
\t input = document.createElement("input"); 
 
\t \t input.type = "text"; 
 
\t \t input.value = "21"; 
 
\t \t document.body.appendChild(input); 
 
} 
 

 
function ula(){ 
 
\t ul = document.createElement("ul"); 
 
\t ulAttr = document.createAttribute("id"); 
 
\t ulAttr.value = "demo"; 
 
\t ul.setAttributeNode(ulAttr); 
 
\t document.body.appendChild(ul); 
 

 

 
} 
 

 
inputa(); 
 
button(); 
 
ula(); 
 
function list() { 
 
li = document.createElement("li"); 
 
\t li.innerHTML = input.value; 
 
\t ul.appendChild(li); //not document.ul, as mentioned in comments! 
 
} 
 

 
a.addEventListener("click", list); 
 
}

<p onclick="Add();">Test</p>

あなたはボタンのために一つの追加機能、およびイベントリスナーを必要とする：

function list() { 
li = document.createElement("li"); 
    li.innerHTML = input.value; 
    ul.appendChild(li); 
} 

a.addEventListener("click", list); 

liを作成してリスト項目にコンテンツを配置します。

P.S.私は最初のli（ula（）関数で）の自動挿入を削除しましたが、希望の動作であればそれを保持することができます。