这里是 JS 新手。在发布这个问题之前，我已经搜索了整个 stackoverflow，如果它是重复的并且需要删除，请评论这个问题。
我正在 google chrome 扩展程序中创建一个表单，它接受输入并在按下提交按钮时将其记录在控制台中。
我能够(通过 Id)获取元素，但即使在输入邮政编码后单击提交按钮后，它也没有任何值。这是代码:
document.addEventListener('DOMContentLoaded', function() {
var zipCode = document.getElementById("zipCode");
console.log("Zip Code is: " + zipCode.id);
console.log("Zip Code value: " + zipCode.value);
}, false);
<body style="width:320px;height:580px;">
<form action="/main.html" style="position: center; text-align: left; padding-left: 20px">
<h3>Zip Code</h3>
<input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">
<input type="submit" id="button" value=" Tap" style="font-family: 'Open Sans'" name="Submitted zip code">
</form>
</body>
控制台输出为:
Zip Code is: zipCode
Zip Code value:
最佳答案
猜猜你想要这个，只有在点击按钮后才能得到值；
document.addEventListener('DOMContentLoaded', function() {
var zipCode = document.getElementById("zipCode");
console.log("Zip Code is: " + zipCode.id);
var btn = document.getElementById('button');
btn.addEventListener('click', function() {
event.preventDefault();
console.log("Zip Code value: " + zipCode.value);
}, false)
}, false);<body style="width:320px;height:580px;">
<form action="/main.html" style="position: center; text-align: left; padding-left: 20px">
<h3>Zip Code</h3>
<input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">
<input type="submit" id="button" value="click me" style="font-family: 'Open Sans'" name="Submitted zip code">
</form>
</body>关于javascript - chrome 扩展中的表单值为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49715593/