我在一个简单的 rails 项目上制作表单时遇到了麻烦。

基本思路是从表单中获取姓名和日期，然后使用 JS 在同一页面上重新使用它们。稍后我会处理这些信息，确定是否是您的生日，以及距离您的下一个生日还有多少天。

在 localhost 中第一次加载页面时，JS 似乎无法正确加载。它找不到表单。 我在控制台中看到此消息，指的是表单 ID：

Uncaught TypeError: Cannot read property 'addEventListener' of null

如果我第一次填写表单，什么也不会发生。 如果我只是刷新页面，或者第二次提交表单，表单和 JS 就可以正常工作。我的 URI 从 localhost:3000/page 更改为 localhost:3000/page?。 我不知道为什么，我已经在 J​​S 上设置了阻止默认值。

我尝试在 JS 脚本的开头设置一个条件，如果表单存在，则执行您的操作。我没有遇到第一个控制台错误，但脚本在第一次加载页面时仍然不起作用。

感谢您的建议。

表单的 HTML 代码：

<div class="js-form">
        <form id= "new_test_form">
            <div class="mb-3">
                <label for="username" class="form-label"> Your Name</label>
                <input type="text" class="form-control" id="username">
            </div>
            <div class="mb-3">
                <label for="dateinput" class="form-label">Your birth date</label>
                <input type="date" class="form-control" id="dateinput">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <div class="results">
    Here will be displayed the results
    </div>

和 JS

console.log('Hello from My bdtest')

const form2 = document.querySelector("#new_test_form");
const result = document.querySelector(".results"); // CSS id selector

if (form2) {
  form2.addEventListener("submit", (event) => {
  event.preventDefault();
  const fn_form = document.querySelector("#username").value
  const age_form = document.querySelector("#dateinput").value
  const nd = new Date(age_form)
  console.log(fn_form);
  console.log(age_form);
  console.log(nd.toDateString());
  result.insertAdjacentHTML("beforeend", `<p> Your Name is <strong>${fn_form}</strong></p>` );
  result.insertAdjacentHTML("beforeend", `Your date of birth is ${age_form}` );
  });
}