クロム拡張子のフォーム要素の値を取得しようとするとエラーが発生する

クロム拡張機能を使用しています。ボタンを押すと、現在の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" 
    ] 
}

出典

2017-02-10 Julio Cesar

あなたはここにタイプミスしている：の、多分これが問題になるの？に変更します。 –

それは

の作品

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>

出典

2017-02-10 21:35:38

クロム拡張子のフォーム要素の値を取得しようとするとエラーが発生する

答えて

関連する問題