Samo-wykonująca się funckjca

Mam w pliku html znacznik typu input:

<input type="text" value="This work!" id="pole">

oraz plik main.js

function print() {
	var x = document.querySelector('#pole');
	window.console.log(x.value);
}
window.onload = function () {
	'use strict';
	print();
};

I taki kod działa ok. I teraz moje pytanie dlaczego nie działa ten kod poniżej, którym chcę zastąpić powyższy? W konsoli pokazuje mi się błąd:Uncaught TypeError: Cannot read property 'value' of null

(function () {
	var x = document.querySelector('#pole');
	window.console.log(x.value);
}());

Tutaj działa normalnie:
https://jsbin.com/rozegubaci/1/edit?html,js,console,output

Treść błędu świadczy o tym, że zmienna x jest u Ciebie nullem.

Rozumiem o co chodzi w komunikacie, ale nie wiem dla czego się tak dzieje. Czy jesteś mi w stanie to wyjaśnić?

Już rozwiązałem problem. A o to rozwiązanie: funkcja ta wykonywała się przed wczytaniem całego dokumentu html, czyli nie mogła znaleźć tego inputa. Znacznik script z ścieżką umieściłem bezpośrednio przed zamknięciem znacznika body.

To trochę hardkorowo, zostaw ścieżkę do skryptu w nagłówku a daj taki kod ;)

(function() {

  $(document).ready(function() {
    var x = document.querySelector('#pole');
    window.console.log(x.value);

  });
}());

RideorDie napisał(a):

(function() {

  $(document).ready(function() {
    var x = document.querySelector('#pole');
    window.console.log(x.value);

  });
}());

jesli jużużywamy jQuery to wystarczy:

$(function() {
    var x = $('#pole');
    console.log(x.val());
});

Dlatego że tak się nie robi. Nie spotkałem się jeszcze żeby ktokolwiek umieszczał ścieżki do skryptów wewnątrz znaczników body ;)

robi się tak cały czas, wiele skryptów jeszcze jest osadzane w ten sposób - opóźnia to ładowanie strony bo ta nie może być ładowana dalej dopóki nie zostanie załadowany skrypt
Nie przeszkadza natomiast osadzenie skryptu na samym końcu - strona normalnie się wyświetli

Robiło się to tak kiedyś, gdy nie wszystkie przeglądarki jeszcze obsługiwały zdarzenie OnDOMContentLoaded (IE < 9). Zdarzenie OnLoad wywołuje się za późno bo obejmuje również ładowanie obrazków i tym podobnych, dlatego wiele skryptów było po prostu dołączane na samym końcu dokumentu przed zamknięciem </body>
Od czasów jQuery już się tego nie robi i używa się

$(function() {
   // ...
});

Plusem jest oczywiście to że można taki skrypt dołączyć w dowolnym miejscu