Queryselector returns null, can't figure out why

Question

Im trying to select a button, but it keeps returning null. I've used just this exact method before, but now it only returns null.. I tried using "document.GetElementById" but that resulted in the same thing. Hope someone can help me understand why this isn't working properly!

Here is my code:

html(index.html):

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Oppgaver kap 11 - Itslearning</title>
  </head>
  <body>
    <!--<script type="text/javascript" src="sketch.js"></script>-->
    <script type="text/javascript" src="todimArray.js"></script>
    <button id="knapp">Trykk her</button>
  </body>
</html>

Javascript(todimArray.js):

var poeng = [
    [12, 15, 15, 13],
    [16, 13, 14, 13],
    [17, 18, 17, 17],
    [9, 10, 7, 11],
    [12, 15, 19, 16],
    [12, 12, 17, 10],
    [19, 18, 20, 18],
    [16, 12, 17, 16]
];

var knapp = document.querySelector('#knapp');
var bodyEl = document.querySelector('body');
var pEl = document.createElement("p");

knapp.addEventListener('click', oppgA);

function oppgA() {
    var elevNr = Number(prompt("Skriv inn eleven sitt nummer:"));
    var setning = "";
    var sum = 0;
    var gjennomsnitt = 0;

    if (elevNr > 0 && elevNr < poeng.length) {
        for (var i = 0; i < poeng[elevNr - 1].length; i++) {
            sum += poeng[elevNr - 1][i];
        }
        gjennomsnitt = sum / poeng[elevNr - 1].length;

        setning = "Eleven sin poeng sum er " + sum + ". Gjennomsnittet er " + gjennomsnitt;
    }
    else{
      setning = "Tallet du skrev inn er ugyldig!";
    }
    p.innerHTML = setning;
    body.appendChild(p);
}

typos - `p` and `body` used instead of `pEl` and `bodyEl`... — kukkuz, Jan 05 '17 at 15:17
As mentioned, script is loaded before the element is loaded on the page, best practice (unless there is a need to load the script earlier) is to load your JS files at the bottom after all your content, this ensures any references are already loaded — Mark Walters, Jan 05 '17 at 15:18
Apart from the mentioned typos you can change your script tag to read like `` Also see the [defer](http://www.w3schools.com/tags/att_script_defer.asp) attribute. — Redu, Jan 05 '17 at 15:52
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Apr 09 '21 at 13:43

Oriel.F · Accepted Answer · 2017-01-05T15:35:03.263

try moving your script tag to the the end of the body like this :

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Oppgaver kap 11 - Itslearning</title>
  </head>
  <body>
    <button id="knapp">Trykk her</button>
    <!--<script type="text/javascript" src="sketch.js"></script>-->
    <script type="text/javascript" src="todimArray.js"></script>
  </body>
</html>

like this your script loaded after the entire DOM Elements finish to load (in your case the knapp button)

2) you have wrong variables name :

change

p.innerHTML = setning;
body.appendChild(p);

to

pEl.innerHTML = setning;
bodyEl.appendChild(pEl);

Thank you! Your suggestion work perfectly, thanks : -) – Marius Tobiassen Jan 05 '17 at 15:44 — Marius Tobiassen, Jan 05 '17 at 15:44

score 1 · Answer 2 · answered Jan 05 '17 at 15:21

You should mark your HTML like that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Oppgaver kap 11 - Itslearning</title>
  </head>
  <body>
    <button id="knapp">Trykk her</button>

    <!--<script type="text/javascript" src="sketch.js"></script>-->
    <script type="text/javascript" src="todimArray.js"></script>
  </body>
</html>

You should always link your JS files before the closing body tag if possible, because the script is not aware of the button if you link the script before the button.

You can also use the event DOMContentLoaded in pure javascript or $(document).ready() in jquery if you need to link your script before your HTML

Queryselector returns null, can't figure out why

2 Answers2