Question

我点击提交按钮后尝试将之前提交的值保留在屏幕上。例如，如果我输入Apple并按提交，则会显示Apple。但是，如果我输入Banana，则Apple会消失并被Banana替换。我提交Apple后，有没有办法在页面上保留Banana？这是我正在使用的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

我在您的函数底部添加了一行额外的代码，以便每次都清除文本输入＆＃34;提交＆＃34;点击。

<!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 个答案: