2017-03-26 11 views
0

私は送信ボタンを押すと、以前に提出された値を画面に保存しようとしています。たとえば、Appleと入力してsubmitを押すと、Appleが表示されます。ただし、Bananaと入力すると、Appleが消え、Bananaに置き換えられます。 Bananaを提出した後、ページにAppleを保存する方法はありますか?ここに私が使っているHTML/JavaScriptがあります。新しい結果を出力するには、以前の結果をページに保存するにはどうすればよいですか?

+1

http://handlebarsjs.com/

<body> <form> Enter message: <input type="text" id = "message"> <input type="button" onclick="showMessage()" value="submit" /> </form> <p> Message is: <span id = "display_message"></span> </p> </body> 

JS

var entries=[]; function showMessage(){ var message = document.getElementById("message").value; entries.push(message); display_message.innerHTML= entries.join(","); } 

フィドルは、単純に追加そこには+があります: 'display_message.innerHTML + = '' + message;' – moisrex

+0

js配列/オブジェクトの入力ボックスの値をプッシュし、ループを使用して挿入したすべての値を表示するだけです。 – Jayanta

答えて

0

入力を一緒に入力するだけで済みます。それを画面上にどのように表示するかによって異なります。この例では、私は各入力を配列に押し込み、コンマで配列を結合してリストを表示します。

あなたは、より複雑なレイアウトを行うために探している場合たとえば、テンプレート言語を見てみましょう:

https://jsfiddle.net/aq676/543/

+0

優秀!ありがとうございました!これは完璧です! – Clarence

+0

あなたは私の答えを受け入れることができますか?ありがとうございました。喜んで助けてくれました。 – MartinWebb

0

"submit"をクリックするたびにテキスト入力をクリアするために、関数の最後に余分なコード行を追加しました。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
    var allMessages = ""; 
    function showMessage(){ 
     var message = document.getElementById("message").value; 
     allMessages += message + " "; 
     display_message.innerHTML= allMessages; 
     document.getElementById("message").value = ""; 
     } 
    </script> 
</head> 
<body> 
    <form> 
    Enter message: <input type="text" id = "message"> 
    <input type="button" onclick="showMessage()" value="submit" /> 
    </form> 
    <p> Message is: <span id = "display_message"></span> </p> 
</body> 
</html> 
関連する問題