提交后页面消失问题：如何在段落中保留显示输入数组元素

你的问题出在表单默认的提交行为上——表单提交后会自动刷新页面，导致当前页面状态丢失。虽然你的memory函数返回了false，但onsubmit="memory()"的写法并没有把返回值传递给表单的提交事件，所以无法阻止默认刷新行为。

修复方案（两种可选） #

方案1：修改onsubmit属性，传递函数返回值

把表单的onsubmit属性改成onsubmit="return memory()"，这样函数返回的false就能被表单接收，从而阻止默认刷新。

方案2：在函数内手动阻止事件默认行为

给memory函数添加事件参数，调用event.preventDefault()直接阻止表单的默认提交动作，这种方式更灵活，也符合现代JS的写法。

优化后的完整代码 #

同时还修复了变量未声明的问题，并添加了提交后清空输入框的逻辑，提升用户体验：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1{
color: Crimson;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: gray;
}
#sentence{
width:300px;
height: 200px;
border: 2px dashed darkred;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>

<h1>Show Room</h1>

<!-- 方案1写法：onsubmit="return memory()" -->
<form onsubmit="return memory()">
<!-- 方案2写法：onsubmit="memory(event)" -->
 
 <p>Add items to display bellow</p>
 
 <textarea id="box" name="box" rows="4" cols="50" placeholder="example: frame picture beach ..."></textarea>
 
 <input type="submit" value="Submit">

</form>
<h3>Display</h3>
<p id="sentence"></p>

<script>

var items = [];

// 方案1对应的函数
function memory() {
  // 声明变量，避免全局污染
  let boxvalue = document.getElementById('box').value;
  // 空内容不添加
  if(boxvalue.trim()){
    items.push(boxvalue);  
    document.getElementById("sentence").innerHTML = items.join('<br>'); // 用换行分隔内容，更易读
    // 提交后清空输入框
    document.getElementById('box').value = '';
  }
  return false;
}

// 方案2对应的函数（如果用方案2，替换上面的函数）
/*
function memory(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  let boxvalue = document.getElementById('box').value;
  if(boxvalue.trim()){
    items.push(boxvalue);  
    document.getElementById("sentence").innerHTML = items.join('<br>');
    document.getElementById('box').value = '';
  }
}
*/
</script>
</body>
</html>

关键修改说明 #

1. 阻止表单默认刷新：通过return memory()或event.preventDefault()解决页面消失问题；
2. 变量声明：给boxvalue添加let声明，避免全局变量污染；
3. 空内容过滤：添加trim()判断，避免存入空字符串；
4. 内容格式优化：用join('<br>')将数组内容按换行展示，比直接输出数组更清晰；
5. 用户体验优化：提交后清空输入框，方便继续添加内容。

内容的提问来源于stack exchange，提问作者mmirbekian