JavaScript DOM表单提交任务报错，请求排查问题

问题概述 #

完成JavaScript & DOM表单提交任务时，控制台能输出预期信息，但自动评测系统报错，代码逻辑符合任务要求，但存在细节疏漏需要排查。

任务要求 #

• 声明变量form，赋值为id为"contact-form"的HTML元素；
• 为form添加submit事件监听器，调用handleSubmit函数；
• 创建handleSubmit函数，接收event参数；
• handleSubmit函数需完成：
  • 阻止默认提交行为
  • console.log("submitting form...")
  • 获取id为"message"元素的输入值并赋值给test变量
  • console.log(test)
  • 提交表单
  • console.log("form submitted")

我的代码 #

let test; // assignment to this variable is to be done inside the function you create
// write your code below

let form = document.getElementById("contact-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
   event.preventDefault();
   console.log("submitting form...");
   let test = document.getElementById("message").value;
   console.log(test);
   form.submit(); 
   console.log("form submitted");
}

尝试过的方法 #

• 使用event.target.submit();
• 使用event.target.dispatchEvent(new Event('submit'));
• 使用document.form.submit();
  以上方法均未解决问题，反而产生更多错误。

错误提示 #

⚠ Hint
Does the function handleSubmit work? Does it prevent the default 
event? Does it read the value from the textarea element and assign 
it to a variable? Does it submit the form?

页面HTML代码 #

<!DOCTYPE html>
<html lang="en-US">
  <head>

    <title>Form Submission</title>
    <link rel="stylesheet" href="index.css" type="text/css">
  </head>
  <body>
    <form id="contact-form" method="POST"action="https://formdump.codeinstitute.net/">
        <label for="message">Message:</label>
        <textarea id="message" name="message" type="text"></textarea>
        <input id="submit-button" type="submit">
    </form>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
  </body>
</html>

问题分析与解决 #

核心问题 #

代码中在handleSubmit函数内使用了let test，这会创建一个局部变量test，覆盖了全局作用域中已经声明的test变量。自动评测系统应该是在检查全局test变量是否被正确赋值，而当前全局test始终为undefined，因此触发报错。

修复代码 #

将函数内的let test改为直接赋值，去掉let关键字，确保赋值给全局test变量：

let test; // assignment to this variable is to be done inside the function you create
// write your code below

let form = document.getElementById("contact-form");
form.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
   event.preventDefault();
   console.log("submitting form...");
   test = document.getElementById("message").value; // 去掉let，赋值给全局变量
   console.log(test);
   form.submit(); 
   console.log("form submitted");
}

额外说明 #

• form.submit()的使用是正确的：调用表单元素的submit()方法不会触发submit事件监听器，因此不会陷入循环提交的问题，这也是任务要求的正确提交方式。
• 之前尝试的dispatchEvent方法会再次触发submit事件监听器，导致无限循环，因此不适用。

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