addEventListener()单次表单提交后无法更新HTML元素问题

你的代码存在三个直接导致功能失效的错误：

• 值读取时机完全错误：你把四个输入框的value读取逻辑写在了点击事件函数的外层，这段代码仅会在页面首次加载、输入框全空的时候执行一次，后续不管用户输入什么内容，外层定义的几个常量存的永远是初始的空字符串，不会同步用户的最新输入。
• HTML的ID重复且写错：表单里后三个输入框的id、name、关联的label for属性全部错写成了colmax。注意：HTML要求页面内ID全局唯一，这就导致document.getElementById("rowmin")、document.getElementById("rowmax")根本找不到对应元素，返回null，读取null.value会直接触发JS运行错误，函数直接中断，根本走不到校验通过后展示colmax的逻辑。
• 属性误用：<p id="errormsg">是普通文本标签，不存在value属性，只有input、select、textarea这类表单控件才有value属性，这行取值逻辑本身就是无效的。
• 额外说明：你在form标签上已经加了onsubmit="return false"阻止默认刷新，函数里的return false和这个作用重复，保留一处即可。

JS部分 #

把值的读取逻辑移到点击事件内部，每次点击都实时获取最新输入值：

document.getElementById("btn").addEventListener("click", newFunction);

function newFunction() {
  // 每次点击提交时再读取最新输入值，同时用trim去掉首尾空白字符
  const colmin = document.getElementById("colmin").value.trim();
  const colmax = document.getElementById("colmax").value.trim();
  const rowmin = document.getElementById("rowmin").value.trim();
  const rowmax = document.getElementById("rowmax").value.trim();
  const resultBox = document.getElementById("demo");

  // 非空校验
  if (!colmin || !colmax || !rowmin || !rowmax) {
    resultBox.textContent = "请填写所有字段";
    return false;
  }
  // 校验通过输出结果，用textContent比innerHTML更安全，避免XSS风险
  resultBox.textContent = `最大列值为：${colmax}`;
  return false;
}

HTML修正部分 #

把后两个行输入框的ID、name、label关联属性改对，保证ID唯一：

<p id="demo"></p>
<div id="msg">
  <p id="errormsg"></p>
</div>

<h2>JavaScript addEventListener()方法示例</h2>
<p>该示例通过addEventListener()方法读取表单数据，做基础错误处理后更新页面内容</p>
<table id='mytable'></table>

<section class="container">
  <form id="myform" onsubmit="return false">
    <div>
      <label for="colmin">最小列值（范围-50到50）：</label>
      <input type="number" id="colmin" name="colmin" min="-50" max="50">
    </div>
    <div>
      <label for="colmax">最大列值（范围-50到50）：</label>
      <input type="number" id="colmax" name="colmax" min="-50" max="50">
    </div>
    <div>
      <label for="rowmin">最小行值（范围-50到50）：</label>
      <input type="number" id="rowmin" name="rowmin" min="-50" max="50">
    </div>
    <div>
      <label for="rowmax">最大行值（范围-50到50）：</label>
      <input type="number" id="rowmax" name="rowmax" min="-50" max="50">
    </div>
    <div>
      <input id="btn" class="button" type="submit" value="提交">
    </div>
  </form>
</section>

• 为什么事件绑定要写在变量声明前面才生效？这个结论本身不成立。你之前遇到的顺序问题，本质是外层变量读取的时机不对，只要保证JS执行时对应的DOM元素已经加载完成，事件绑定和变量声明的顺序没有强制要求。
• 为什么要写return false？submit类型的按钮默认会触发表单提交、页面刷新的行为，return false的作用就是阻止这个默认行为，和你写在form标签上的onsubmit="return false"作用完全一致，不需要两处都写。

内容的提问来源于stack exchange，提问作者jordan-gyaltsen