本文旨在解决JavaScript表单提交时，结果无法在表单内部指定位置显示的问题。通过将相关元素包裹在
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()必须在事件处理函数的最开始调用，以确保阻止默认行为。
- 根据实际需求，修改金额验证的逻辑。
- 建议对用户输入进行适当的验证和清理，以防止安全问题。
总结
通过将表单元素包裹在
