[英]How do I keep the previous result on the page when outputting a new one?
I'm trying to keep the previously submitted value on the screen after hitting the submit button. 我试图在单击“提交”按钮后将先前提交的值保留在屏幕上。 For example, If I enter Apple
and press submit, Apple
appears. 例如,如果我输入Apple
并按Submit,则出现Apple
。 However, if I enter Banana
, Apple
disappears and is replaced by Banana
. 但是,如果我输入Banana
, Apple
消失,由Banana
代替。 Is there a way to keep Apple
on the page after I submit Banana
? 提交Banana
后,有没有办法让Apple
留在页面上? Here's the HTML/JavaScript I'm using. 这是我正在使用的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>
I added an extra line of code at the bottom of your function to clear the text input each time "submit"is clicked. 我在函数的底部添加了一行额外的代码,以清除每次单击“提交”时输入的文本。
<!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>
You just need to join the inputs together. 您只需要将输入结合在一起。 Depending on how you want that to appear on screen. 取决于您希望它在屏幕上显示的方式。 In this example. 在这个例子中。 I push each input into an array, then join the array with a comma and display the list. 我将每个输入推入数组,然后用逗号将数组加入并显示列表。
If you are looking to do more complex layouts take a look at a template language for example: http://handlebarsjs.com/ 如果您要进行更复杂的布局,请查看模板语言,例如: 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 JS
var entries=[];
function showMessage(){
var message = document.getElementById("message").value;
entries.push(message);
display_message.innerHTML= entries.join(",");
}
Fiddle 小提琴
https://jsfiddle.net/aq676/543/ https://jsfiddle.net/aq676/543/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.