本文旨在解决JavaScript中表单提交按钮（Submit button）无法正确显示数据的问题。通过将相关元素包裹在
使用 submit 事件监听器
接下来，使用JavaScript来监听表单的 submit 事件。当用户点击提交按钮时，该事件会被触发。
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 < 100 ? 'Amount must contain at least 3 characters' : AmountPaid
}
document.getElementById("goalForm").addEventListener('submit', userNameInput);在上述代码中，event.preventDefault() 方法用于阻止表单的默认提交行为，从而避免页面刷新。然后，我们获取输入框的值，并根据需要进行处理，最后更新 result 元素的内容。
代码详解
- document.getElementById('goalForm'): 获取id为goalForm的表单元素。
- addEventListener('submit', userNameInput): 为表单添加一个事件监听器，监听submit事件。当表单提交时，userNameInput函数会被调用。
- event.preventDefault(): 阻止表单的默认提交行为，即阻止页面刷新。
- document.getElementById('AmountPaid').value: 获取id为AmountPaid的输入框的值。
- result.textContent = ...: 将结果显示在id为result的段落中。
注意事项
- 确保所有的输入框和提交按钮都位于
- event.preventDefault() 必须在事件处理函数的开头调用，以确保表单的默认行为被阻止。
- 根据实际需求，可以对输入的数据进行验证和处理。
总结
通过将相关元素包裹在
