输出新结果时，如何将先前结果保留在页面上？

Question

我试图在单击“提交”按钮后将先前提交的值保留在屏幕上。 例如，如果我输入Apple并按Submit，则出现Apple 。 但是，如果我输入Banana ， Apple消失，由Banana代替。 提交Banana后，有没有办法让Apple留在页面上？ 这是我正在使用的HTML / JavaScript。

<!DOCTYPE html>
<html>

<head>
    <title>HTML JavaScript output on same page</title>
    <script type="text/JavaScript">
      function showMessage() {
        var message = document.getElementById("message").value;
        display_message.innerHTML = message;
      }
    </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>

Answer 1

我在函数的底部添加了一行额外的代码，以清除每次单击“提交”时输入的文本。

<!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>

Answer 2

您只需要将输入结合在一起。 取决于您希望它在屏幕上显示的方式。 在这个例子中。 我将每个输入推入数组，然后用逗号将数组加入并显示列表。

如果您要进行更复杂的布局，请查看模板语言，例如： 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(",");
}

小提琴

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

输出新结果时，如何将先前结果保留在页面上？

问题描述

2 个解决方案

解决方案1
0 2017-03-26 17:46:17

解决方案2
0 已采纳 2017-03-26 18:02:50

输出新结果时，如何将先前结果保留在页面上？

问题描述

2 个解决方案

解决方案1 0 2017-03-26 17:46:17

解决方案2 0 已采纳 2017-03-26 18:02:50

解决方案1
0 2017-03-26 17:46:17

解决方案2
0 已采纳 2017-03-26 18:02:50