配列が要素Node.jsをプッシュしない

Question

私は、ユーザーがページに表示されている入力を提出できるようにする簡単なフォームを作成しています。各入力は後に追加されるので、ユーザーが「1」を入力して「submit」をクリックすると、ページに「1」が表示されます。ユーザが「2」を入力すると、「1」の真下に「2」が表示されます。 "1"は削除されません。

私はユーザー入力を配列に保存しています。私はその配列を反復してページにユーザー入力を表示します。私が実行している問題は、配列内の何も保存されないため、ユーザー入力をページにレンダリングしようとすると何もレンダリングされません。

/* This is pseudocode */ 
    var list = []; 

    for each value in list 
     add value to page 

    addToList = function() { 
     var value = document.getElementById("userEntry").value; 
     list.push(value); 
    } 

addToList関数は、ユーザーがsubmitをクリックするたびに呼び出されます。私はNode.jsを使用していますが、私は提出するたびにJavaScriptファイルがリフレッシュされ、ページがリロードされ、配列がクリアされるため、これは機能しません。

アレイにユーザー入力の値を保存させる場合はどうすればよいですか。

Answer 1

@レパントが正しい。 <input type="submit">ページが更新され、状態が失われます。あなたが名前addToListと機能インスタンスへの参照を初期化しているが、この関数を呼び出したことがない

<button onclick="addToList" >submit</button>

Answer 2

は、データを永続化する

$('#button').click(() => { 
    list.push($('#userEntry').val()); 
})" 

Answer 3

ボタン（/要素）jQueryのを使用しようとしてから、 "ヴァル（）$（ '＃のuserEntry'）"、あなたはのlocalStorageにデータを保存することができます。

これはどのように行うことができます。

/* This is pseudocode */ 
    var list = []; 

    for each value in list 
     add value to page 

    addToList = function() { 
     var value = document.getElementById("userEntry").value; 
     list.push(value); 
    } 

    onSubmit = function() { 
     //localStorage.setItem('key', 'value'); 
     localStorage.setItem('myList', JSON.stringify(list)); 
    } 

    getList = function() { 
     //localStorage.getItem('key'); 
     list = JSON.parse(localStorage.getItem('myList')); 
    } 

Answer 4

：これを試してみてください。

addToList関数内にconsole.logを追加すると、この関数が呼び出されないことがわかります。

代わりに、関数を宣言した後、括弧でそれを呼び出すことによって、それを実行する必要があります。addToList()