本文旨在解决JavaScript表单提交时，结果无法在表单内部指定位置显示的问题。通过将相关元素包裹在
：这使得我们可以监听表单的submit事件。监听submit事件并阻止默认行为：使用event.preventDefault()可以阻止表单的默认提交行为，从而避免页面刷新。在事件处理函数中更新结果显示区域：获取表单输入的值，进行处理，并将结果显示在指定的位置。
以下是一个完整的示例代码：
const result = document.getElementById('result');const userNameInput = function(event) { event.preventDefault(); // 阻止表单默认提交行为 let AmountPaid = +document.getElementById('AmountPaid').value; let threeMonthGoal = document.getElementById('threeMonthGoal').value; result.textContent = +AmountPaid < 3 ? 'Amount must contain at least 3 characters' : AmountPaid;}document.getElementById("goalForm").addEventListener('submit', userNameInput);
代码解释：
HTML部分：使用：输入金额的文本框。：提交按钮，类型为submit。
：用于显示结果的段落。JavaScript部分：const result = document.getElementById(‘result’);：获取结果显示区域的DOM元素。const userNameInput = function(event) { … }：事件处理函数，当表单提交时被调用。event.preventDefault();：阻止表单的默认提交行为。let AmountPaid = +document.getElementById(‘AmountPaid’).value;：获取金额输入框的值，并尝试转换为数字。result.textContent = +AmountPaid document.getElementById(“goalForm”).addEventListener(‘submit’, userNameInput);：为表单添加submit事件监听器，当表单提交时，调用userNameInput函数。
注意事项：
确保event.preventDefault()必须在事件处理函数的最开始调用，以确保阻止默认行为。根据实际需求，修改金额验证的逻辑。建议对用户输入进行适当的验证和清理，以防止安全问题。
总结
通过将表单元素包裹在
以上就是解决JavaScript中表单提交按钮无法正确显示结果的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575412.html
微信扫一扫 
支付宝扫一扫 
