Javascript chrome扩展中的表单值为空_Javascript_Google Chrome Extension

Javascript chrome扩展中的表单值为空

javascript google-chrome-extension

Javascript chrome扩展中的表单值为空,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我是新手。在发布这个问题之前，我已经搜索了stackoverflow的所有地方，如果这个问题重复并且需要删除，请对其进行评论我正在google chrome extension中创建一个表单，当按下submit按钮时，该表单接受输入并将其记录在控制台中我能够获取元素（通过Id），但即使在输入邮政编码后单击submit按钮，元素中也没有任何值。代码如下： document.addEventListener('DOMContentLoaded', function() { var zip

我是新手。在发布这个问题之前，我已经搜索了stackoverflow的所有地方，如果这个问题重复并且需要删除，请对其进行评论

我正在google chrome extension中创建一个表单，当按下submit按钮时，该表单接受输入并将其记录在控制台中

我能够获取元素（通过Id），但即使在输入邮政编码后单击submit按钮，元素中也没有任何值。代码如下：

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>

如果您想这样做，则只有在单击

按钮

后才能获得

值

document.addEventListener（'DOMContentLoaded'，function（）{
var zipCode=document.getElementById（“zipCode”）；
log（“邮政编码是：”+zipCode.id）；
var btn=document.getElementById（'button'）；
btn.addEventListener（'click'，function（）{
event.preventDefault（）；
log（“邮政编码值：”+zipCode.value）；
}，错）
}，假）

邮政编码
当按下提交按钮时，页面将重新加载，因此页面中没有值
<input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

然后可以使用URL对象获取传递的值：
var url = new URL(location.href);
var zipCode = url.searchParams.get("zipCode");

非常感谢@xianshenglu。方法event.preventDefault（）的作用是什么？阻止表单提交@kai，如果表单已提交，您将无法看到控制台OK you@Sebastian，很抱歉，我没有正确更新问题，但我们正在讨论chrome extension中的表单提交。你的建议对chrome扩展也有效吗？我在许多文档中看到了document。addEventListener（'DOMContentLoaded'，function（）
是加载表单详细信息的最首选方式。您可以正确地看到，表单本身在DOMContentLoaded之后完全运行，但此时值不在其中
<input type="text" id="zipCode" name="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

var url = new URL(location.href);
var zipCode = url.searchParams.get("zipCode");