表单Submit按钮点击后result元素无法正常显示输入值

你的功能失效和页面刷新无关，根本原因是违反了HTML的id唯一性规则：整个页面里你一共写了3个id="result"的<p>标签。
根据DOM API规则，document.getElementById('result')只会返回DOM树中第一个匹配该id的元素，也就是你放在提交按钮下方的那个p标签，后面两个放在打印区域的同名p标签永远不会被JS选中，自然不会显示你写入的内容。
你之前加的event.preventDefault()没有解决问题，是因为你找错了故障方向，默认提交刷新不是当前故障的诱因。
另外你的代码还存在一个隐性bug：直接使用submitButton变量绑定事件，但没有提前通过DOM方法获取这个按钮元素，运行时会抛出变量未定义的错误。

方法1：多位置同步展示结果 #

如果需要在输入区、打印区多个位置同时展示输入内容，给每个展示位设置唯一id，JS中统一赋值：

1. 修改HTML中重复的result id：

<!-- 输入区提交按钮旁的提示位 -->
<p id='result-tip'></p>

<!-- 打印区域第一处金额展示位 -->
<p id='result-amount-1'></p>

<!-- 打印区域第二处金额展示位 -->
<p id='result-amount-2'></p>

2. 调整JS逻辑，先获取按钮元素再绑定事件，给所有展示位同步写入内容：

// 先获取按钮DOM
const submitButton = document.getElementById('submitButton');

const userNameInput = function(event) {
  event.preventDefault();
  event.stopPropagation();
  const AmountPaid = document.getElementById('AmountPaid').value;
  const threeMonthGoal = document.getElementById('threeMonthGoal').value;
  
  // 获取所有结果展示位
  const resultTip = document.getElementById('result-tip');
  const resultPrint1 = document.getElementById('result-amount-1');
  const resultPrint2 = document.getElementById('result-amount-2');

  const displayText = AmountPaid.length < 3 
    ? 'Name must contain at least 3 characters'
    : AmountPaid;

  // 统一赋值
  resultTip.textContent = displayText;
  resultPrint1.textContent = displayText;
  resultPrint2.textContent = displayText;
}

submitButton.addEventListener('click', userNameInput, false);

方法2：仅保留打印区的结果位 #

如果不需要在提交按钮旁显示提示，直接删除另外两个多余的id="result"标签，只保留打印区域你需要展示内容的那一个p标签即可，原有JS逻辑只需补上获取submitButton的代码就能正常运行。

如果要留存所有表单输入值用于后续打印，可以在提交逻辑里把所有字段值存在一个全局对象中，打印时直接从对象取值填充到打印模板对应位置，不需要反复读取输入框的value属性，维护更方便。

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