2017-07-03 12 views
-2

私はWeb開発には新しく、追加ボタンをクリックすると、停止ボタンが押されるまでユーザー入力を読み込んでリストにユーザー入力を表示するという要件があります。どうすればいいのですか ?ボタンが押されるまでユーザー入力を読むjavascript

<Title>To Do List</Title> 
    <Body> 
     <Button id = "AddBtn" onClick = "Store()">Add</Button> 
     <Button id = "StopBtn" onclick = "Display()">Stop</Button> 
     <input id = "ip" type = "text" > 

     <script> 
      function Store() 
      { 
       var tasks; 
       tasks.push(document.getElementById('ip')); 
      } 
      function Display() 
      { 
       var i; 
       for(i=0;i<tasks.length;i++) 
       { 
        document.write(tasks[i]); 
       } 

      } 

     </script> 
    </Body> 

+1

これは可変スコープの問題です。 'var tasks = []'を** ** function store()の上に**移動させてください。また、 'document.write'を使用すると残りの文書が削除されます。代わりにDOMメソッドを使用してコンテンツを表示する – Phil

+0

おそらく入力配列の値を取得したいので、 'document.getElementById( 'ip')。value' – RobG

答えて

1
<!Doctype html> 
<html> 

<head> 
    <Title>To Do List</Title> 
</head> 

<Body> 
    <Button id="AddBtn" onclick="Store()">Add</Button> 
    <Button id="StopBtn" onclick="Display()">Stop</Button> 
    <input id="ip" type="text"> 
    <ul id="list"> 
    </ul> 

    <script> 
    var tasks = []; 

    function Store() { 

     tasks.push(document.getElementById('ip').value); 
     document.getElementById("ip").value = ""; 
    } 

    function Display() { 
     var i; 
     for (i = 0; i < tasks.length; i++) { 
     var item = document.createElement("li"); 
     var text = document.createTextNode(tasks[i]); 
     item.appendChild(text); 
     document.getElementById("list").appendChild(item); 

     } 
     tasks = []; 

    } 
    </script> 
</Body> 

</html> 
  1. Javascriptが onclickをすることになって大文字と小文字を区別language.onClickです。
  2. 複数の値を格納したい。 変数ではない配列が必要です。
  3. 要素全体ではなく、配列内の値だけを保存します。
  4. 入力値をタスク配列に追加してクリアする必要があります。
  5. あなたの配列から値を取得し、 値のli要素を作成する必要があります。
  6. ul、ol、divのいずれかのli項目には親が必要です。
  7. 作成したすべてのli要素を親に追加する必要があります。
  8. ループの終了後、表示方法で配列をクリアすることができます。
関連する問題