Question

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:

Answer 1

您想要这样，只有在value被点击后才能获得button;

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>

Answer 2

按下提交按钮时，页面会重新加载，因此

中没有值

<input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

当你试图得到它时（＆＃34; DOMContentLoaded＆＃34;）。如果您想在按下提交按钮后获取该值，您需要从存储为?

之后的值的网址中获取该值

首先，您的表单字段需要name属性：

<input type="text" id="zipCode" name="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");

chrome扩展中的表单值为null

2 个答案: