提问人：Bianca Lopez 提问时间：6/30/2023 更新时间：6/30/2023 访问量：61
当我使用 JavaScript DOM 加载窗口时，我无法捕获输入的值
I can't catch the value of my input when I load window using JavaScript DOM
问：
加载窗口时，我必须将表单中的数据保存在 locaStorage 中。 问题是当我使用“load”事件时，我无法捕获输入的值，给我 null。如果我将“窗口加载”事件更改为“点击”事件，则表单中的按钮可以正常工作。
[HTML全
<form id="contact-form" action="https://formspree.io/f/xbjenldv" method="POST">
<input id="name" class="input-form" name="name" type="text" required>
<button id="submit" type="submit">Get in touch</button>
</form>
JS公司
window.onload = () => {
const name = document.querySelector('#name').value;
localStorage.setItem('formInfo', JSON.stringify(name));
const showInfo = JSON.parse(localStorage.getItem('formInfo'));
console.log(showInfo);
};
我在输入中输入“Bianca”，当我加载时，窗口是空的。我需要该值是“Bianca”。namename
答：
0赞
Phelipe Wener
6/30/2023
#1
我做了一个类似代码的示例：
window.onload = () => {
const name = document.querySelector('#name').value;
const showInfo = JSON.parse(localStorage.getItem('formInfo'));
console.log("info: ", showInfo);
};
function setName(){
const name = document.querySelector('#name').value;
localStorage.setItem('formInfo', JSON.stringify(name));
}<input id="name" class="input-form" name="name" type="text" required>
<button onClick="setName()">Get in touch</button>我相信问题出在您的表单或其他函数未正确更新本地存储中的值。如示例所示，请尝试调用一个函数，该函数将相应地更新输入值。
评论
0赞
Bianca Lopez
6/30/2023
我明白，但我不知道为什么我不处理加载事件。我需要它在加载网页时起作用，而不是在单击提交按钮时起作用。
0赞
Phelipe Wener
6/30/2023
因为当页面加载时，输入的值默认为空。因此，您需要以某种方式进行设置。可以使用输入中的属性值来设置默认值。
0赞
Phelipe Wener
6/30/2023
考虑在输入上查看 onchange 事件。这将在您键入时触发。
0赞
Bianca Lopez
6/30/2023
Phelipe 我尝试在输入中使用“更改”事件，它有效，谢谢，你们！
0赞
epascarello
6/30/2023
#2
让我们大声朗读您的代码在做什么。
- 加载我们运行此代码
- 我们读取输入的值，该值是当时的值，不会更新。
- 我们将值（空字符串）存储到本地存储中。
- 我们读取 localstorage 并将其解析为 JSON。因此，我们把空字符串放回去。
- 我们显示空字符串。
在代码中，您不会读取用户在输入文本后输入的文本。该值只是初始起始值。该变量不会神奇地使用新值进行更新。
您希望在用户提交表单时获取该值。
<form id="contact-form" action="https://formspree.io/f/xbjenldv" method="POST">
<input id="name" class="input-form" name="name" type="text" required>
<button id="submit" type="submit">Get in touch</button>
</form>
window.addEventListener("load", () => {
const form = document.querySelector("#contact-form");
form.addEventListener("submit", () => {
const name = document.querySelector('#name').value;
localStorage.setItem('formInfo', JSON.stringify(name));
});
const showInfo = JSON.parse(localStorage.getItem('formInfo'));
console.log(showInfo);
});
或者，您希望在用户输入文本或更改文本时获取该值。
const input = document.querySelector("#name");
input.addEventListener("input", () => {
const name = input.value;
localStorage.setItem('formInfo', JSON.stringify(name));
});
评论
0赞
Bianca Lopez
6/30/2023
我真的很感激。现在，我能理解这一点了。非常感谢！
评论