<script>逻辑未触发，表单提交后无问候输出的前端问题求助

你代码的两个核心问题： #

1. 脚本执行时机错误：页面刚加载就执行了获取输入框值的代码，这时候用户还没输入任何内容，拿到的是空字符串，而且后续用户输入后也不会重新执行这段代码。
2. 表单默认提交行为未阻止：点击提交按钮后，浏览器会默认刷新页面，导致之前的操作全部重置，自然看不到任何输出。

修复后的代码： #

<form id="greetForm">
   <input type="text" id="firstName" name="firstName" />
   <button type="submit">Submit</button>
</form>

<script>
   // 获取表单元素
   const form = document.getElementById('greetForm');
   // 监听表单提交事件
   form.addEventListener('submit', function(e) {
       // 阻止页面刷新的默认提交行为
       e.preventDefault();
       // 此时获取用户输入的内容
       const userName = document.getElementById("firstName").value;
       // 控制台输出问候语
       console.log(`Hello, ${userName}`);
       // 可选：在页面上显示问候语
       const greetingEl = document.createElement('p');
       greetingEl.textContent = `Hello, ${userName}`;
       document.body.appendChild(greetingEl);
   });
</script>

关键修改说明： #

• 给表单添加id，方便精准获取表单元素
• 通过addEventListener监听表单的submit事件，确保代码在用户点击提交后才执行
• 调用e.preventDefault()阻止浏览器默认的页面刷新行为
• 在事件回调函数内获取输入框的值，此时用户已经完成输入，能拿到正确的内容
• 可选添加页面显示问候语的逻辑，满足你在页面看到结果的需求（如果只需要控制台输出可以去掉这部分）

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