jQuery实现点击按钮显示文本框输入内容功能故障排查

嘿，我帮你梳理下这个功能失效的核心原因，咱们一步步搞定它：

核心问题分析 #

你的功能没跑起来，主要是两个关键问题：

• 表单默认提交会刷新页面：HTML里的<form>标签，点击默认类型为submit的按钮时，会自动触发表单提交，页面一刷新，刚要展示的内容直接就被重置了。
• 缺少JavaScript逻辑处理内容展示：你还没写代码把输入框的值取出来，放到目标<span>标签里。

完整修复代码 #

直接给你改好的可运行代码，复制就能用：

<form id="inputForm">
  <input type="text" id="textInput">
  <button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>

<script>
// 先获取需要用到的DOM元素
const form = document.getElementById('inputForm');
const inputBox = document.getElementById('textInput');
const displaySpan = document.getElementById('guests');

// 监听表单提交事件（比监听按钮点击更靠谱，用户按回车也能触发功能）
form.addEventListener('submit', function(event) {
  // 关键操作：阻止表单默认的页面刷新行为
  event.preventDefault();
  
  // 拿到输入框的内容，顺便去掉前后多余的空格
  const inputContent = inputBox.value.trim();
  
  // 如果有有效输入内容，就更新span的文本
  if (inputContent) {
    displaySpan.textContent = inputContent;
    // 可选优化：提交后清空输入框，提升用户体验
    inputBox.value = '';
  }
});
</script>

额外要注意的小细节 #

• 如果你的JavaScript代码是放在<head>标签里的，可能会出现“找不到元素”的报错——因为此时页面DOM还没加载完成。解决办法是把脚本放到</body>标签的前面，或者用DOMContentLoaded包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 上面的功能代码放在这里就不会出错了
});

• 也可以把按钮的type改成button（<button type="button" ...>），这样点击按钮不会触发表单提交，但还是推荐监听表单提交事件，毕竟用户习惯按回车提交内容。

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