为什么我的JS函数无法将表单值推入数组且值显示后瞬间消失？

问题原因 #

• 提交按钮位于
  标签内部，点击后会触发表单默认提交行为，导致页面刷新，因此输入的内容只会显示一瞬间就消失。
• 数组操作逻辑错误：arr1是普通数组，不存在innerHTML属性；往数组追加元素应该用数组自带的push()方法，直接用+=会把数组强制转为字符串后拼接，破坏原数组结构。
• 数组内容更新后没有同步渲染到页面DOM节点，修改后的内容自然不会显示在页面中。
• 你提到的接口报错是Codepen平台的内部接口异常，和你的业务代码逻辑无关，不需要处理。

修复后的代码 #

let para = document.querySelector('#Arrays');
let arr1 = [25, 6, 3, 5, 8, 9, 4];
para.innerHTML = arr1;
// #test对应textarea节点，调整变量名避免语义混淆
let textarea = document.querySelector('#test');
let button = document.querySelector('#button1'); 
let para2 = document.querySelector('#Arrays2');

button.addEventListener('click', addValue,  false);

function addValue(e){
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    // 提取输入内容并去除前后多余空格
    const inputValue = textarea.value.trim();
    // 空内容不执行提交逻辑
    if (!inputValue) return;
    // 往数组末尾追加新元素
    arr1.push(inputValue);
    // 将更新后的数组重新渲染到页面
    para.innerHTML = arr1;
    // 提交完成后清空输入框
    textarea.value = '';
}

如果需要把新提交的内容单独显示在第二个p标签内，在逻辑末尾加上para2.innerHTML = inputValue即可。

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