javascript - 尝试访问 javascript 中的表单输入

Question

我是 Web 开发的新手，我正在尝试访问我的 javascript 文件中的表单数据，但无法成功。在这里:

我的 HTML:

var name = document.getElementById('loginForm').value;
console.log(name);

<form id="loginForm">
  Username <input type="text" name="username" value="Donald"><br> Password: <input type="text" name="password" value="Duck"><br>
  <input type="submit" value="Submit" />
</form>
<script type="module" src="other.js"></script>

我在单独的 javascript 文件中完成它的原因是我稍后会调用 API。无论我尝试过什么，“姓名”始终是 Donald 而不是我在表单中输入的内容，而且我不确定如果我从输入标签中删除值，我将如何访问它。

非常感谢任何提示。

Answer 1

您的脚本将在加载时调用，这意味着它将始终返回默认值 Donald。

因此，为了获得新值，您可以将点击事件附加到按钮，然后当您点击时，您将获得当前值，例如:

document.getElementById('showName').addEventListener('click', function() {
  console.log(document.querySelector('[name="username"]').value);
})

<form id="loginForm">
  Username: <input type="text" name="username" value="Donald">
  <br> Password: <input type="text" name="password" value="Duck">
  <br>
  <input type="button" value="Show value" id="showName" />
</form>