I've looked at the other answers but still don't understand.
For some reason this line of code always returns null.
var els = document.querySelector("[id='MTG_INSTR$2']");
I checked the value of document in the console so I'm pretty sure that's correct.
The id is buried deep inside a table though, could that be an issue?
EDIT 2: If it helps, here's the full code.
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "start" ) {
start();
}
}
);
function start(){
var els = document.querySelector("[id='MTG_INSTR$2']");
console.log(els);
alert("started");
}
popup.html
<!DOCTYPE html>
<html>
<head></head>
<script src="popup.js"></script>
<body>
<input id="button1" type=button value=clickme>
</body></html>
popup.js
function popup() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
});
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("button1").addEventListener("click", popup);
});
manifest.json
{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"manifest_version": 2,
"name": "extensiontest",
"version": "0.2",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup":"popup.html"
},
//"background": {
// "scripts": ["background.js"]
//},
"permissions": [
"tabs"
]
}
EDIT: I've included a screen shot of what the document structure looks like.
I've looked at the other answers but still don't understand.
For some reason this line of code always returns null.
var els = document.querySelector("[id='MTG_INSTR$2']");
I checked the value of document in the console so I'm pretty sure that's correct.
The id is buried deep inside a table though, could that be an issue?
EDIT 2: If it helps, here's the full code.
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "start" ) {
start();
}
}
);
function start(){
var els = document.querySelector("[id='MTG_INSTR$2']");
console.log(els);
alert("started");
}
popup.html
<!DOCTYPE html>
<html>
<head></head>
<script src="popup.js"></script>
<body>
<input id="button1" type=button value=clickme>
</body></html>
popup.js
function popup() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
});
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("button1").addEventListener("click", popup);
});
manifest.json
{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"manifest_version": 2,
"name": "extensiontest",
"version": "0.2",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup":"popup.html"
},
//"background": {
// "scripts": ["background.js"]
//},
"permissions": [
"tabs"
]
}
EDIT: I've included a screen shot of what the document structure looks like.
Share Improve this question edited May 12, 2017 at 23:38 Sentinel asked May 12, 2017 at 22:59 SentinelSentinel 4611 gold badge6 silver badges26 bronze badges 2- If you want to select element with defined id, use it like this document.querySelector("#MTG_INSTR$2") – Nikola Zivkovic Commented May 12, 2017 at 23:02
- Does this answer your question? Why does jQuery or a DOM method such as getElementById not find the element? – Heretic Monkey Commented Apr 9, 2021 at 13:42
4 Answers
Reset to default 7I doubt your JS gets loaded before the markup and css. In that case, you could try using
<script src="" defer></script>
The contents are loaded first and your java script should work fine after that.
IDs are handled specially in CSS selector syntax, with a # followed by the ID, so you'd normally want something like document.querySelector('#MTG_INSTR$2'), but $ isn't a legal ID ponent, so ideally you'd give it a better name. Other approaches are:
document.getElementById('MTG_INSTR$2'); // No need to change ID
That said, on testing, document.querySelector("[id='MTG_INSTR$2']") should work, so you might check if anything actually has that ID on your page.
Possible solutions to your problem...
IIFE
(function () {
var els = document.querySelector("[id='MTG_INSTR$2']");
console.log(els);
})();
DOMContentLoaded
document.addEventListener("DOMContentLoaded", function () {
var els = document.querySelector("[id='MTG_INSTR$2']");
console.log(els);
});
I don't know your full javascript code but maybe you are create/append that element after the script loads or something like that and therefor querySelector don't find the element with that id. Check your scope or write the code here if you suspicious of that kind of error.