CODEWITHSUNDEEP
javascript
Sentinel
Sentinel

Reputation: 461

document.querySelector always returns null

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.

enter image description here

Upvotes: 5

Views: 14807

Answers (4)

raj praveen
raj praveen

Reputation: 71

I 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.

Upvotes: 7

Reşit K&#246;rsu
Reşit K&#246;rsu

Reputation: 598

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.

Upvotes: 0

Badacadabra
Badacadabra

Reputation: 8497

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);
});

Upvotes: 0

ShadowRanger
ShadowRanger

Reputation: 155323

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 component, 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.

Upvotes: 0

Related Questions