尝试访问 chrome 扩展中的表单元素的值时出错答案

【问题标题】：Error when trying to acess value of a form element in a chrome extension尝试访问 chrome 扩展中的表单元素的值时出错
【发布时间】：2017-02-11 05:35:38
【问题描述】：

我正在做一个 chrome 扩展，当按下按钮时，我会得到当前 url 和输入字段中的值。

但我得到了错误：

Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.myAlert

在行中：

var ip = document.getElementById('ip_dns').value;

获取和存储此值的正确方法是什么？

这是我的代码：

popup.html

<!doctype html>
<html>
  <head>
    <title>DNS Teste</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <form>
        IP DNS
        <input type="text" ip="ip_dns">
        <button id="btn">Teste</button>
    </form>
  </body>
</html>

popup.js

function myAlert(){
  chrome.tabs.getSelected(null, function(tab) {
    var url = tab.url;
    console.log("url: "+ url);
  });
  var ip = document.getElementById('ip_dns').value;
  console.log("IP: "+ip);
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('btn').addEventListener('click', myAlert);
});

manifest.json

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "tabs"
  ]
}

【问题讨论】：

你这里有错字：，也许这就是问题所在？将其更改为

标签： javascript html forms google-chrome

【解决方案1】：

有效

function myAlert(){
  // chrome.tabs.getSelected(null, function(tab) {
  //   var url = tab.url;
  //   console.log("url: "+ url);
  // });
  var ip = document.getElementById('ip_dns').value;
  console.log("IP: "+ip);
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('btn').addEventListener('click', myAlert);
});

<form>
  IP DNS
  <input type="text" id="ip_dns">
  <button id="btn">Teste</button>
</form>

【讨论】：