Jak wykonuje się funkcja w tym kodzie?

Dlaczego w tym kodzie tylko raz wyświetla się "Cokolwiek robisz, nie zmieniaj wielkości okna. Ostrzegam." a potem przy każdym wykonaniu funkcji resize wykonuje się tylko "To łaskocze!"

<p id = "display">
  Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam.
</p>


function resize() {
  var element = document.getElementById("display");
  element.innerHTML = element.innerHTML + " To łaskocze!";
}

window.onresize = resize; 

Bo takie są tu polecenia.
Czego nie rozumiesz albo co (twoim zdaniem) powinno się tu wykonywać?

Myślę, że skoro ciało funkcji wykonuje się za każdym razem wywołania funkcji, to powinna też za każdym razem wykonać się pierwsza linijka ciała czyli var element = document.getElementById("display");
A tu okazuje się, że wykonuje się tylko ta linijka element.innerHTML = element.innerHTML + " To łaskocze!";
I stąd zastanawiam się dlaczego.

Tak na marginesie - czy wzorem innych języków:

window.onresize = resize;

nie powinno mieć () na końcu?

Czy Twój problem polega na tym, że chcesz otrzymać "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam. To łaskocze", a dostajesz "To łaskocze"?

dlatego, że te 2 linie możesz skrócić do

document.getElementById("display").innerHTML = document.getElementById("display").innerHTML + " To łaskocze!";

a z tego wynika, że do tego co istnieje dodawany jest tekst "To łaskocze"

Jaro, mógłbyś jeszcze ciut bardziej wyjaśnić, bo jeszcze nie rozumiem dokładnie jak to działa. Z góry serdeczne dzięki.

w pierwszej kolejności to document.getElementById("display").innerHTML zwraca "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam." po czym następuje łączenie stringów
"Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam." + " To łaskocze!" czyli "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam. To łaskocze!"
a to jest przypisywane do document.getElementById("display").innerHTML więc nadpisuje stara wartość więc w polu pojawi "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam. To łaskocze!" i tak przy każdej iteracji,
w kolejnej masz w document.getElementById("display").innerHTML tekst "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam. To łaskocze!" po wykonaniu łaczenia
"Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam. To łaskocze!" + " To łaskocze!" do document.getElementById("display").innerHTML przypisywany jest "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam. To łaskocze! To łaskocze!"

nie wiem jak to ci bardziej wyjaśnić, to jest najprostsza operacja

var a = "jakis test"
a = a + "inny tekst"

Pierwsza linia:

var element = document.getElementById("display");

Tworzy zmienną element a jej wartością staje się obiekt o identyfikatorze display, czyli ten paragraf z napisem "Cokolwiek robisz nie zmieniaj wielkości okna. Ostrzegam".
Od tej pory ta zmienna jest jakby takim "skrótem do obiektu" i odwoływanie się do jej metod będzie tożsame z odwoływaniem się do samego obiektu.

Druga linia:

element.innerHTML = element.innerHTML + " To łaskocze!";

Mówi:
Niech zawartość obiektu = odczytanej z niego aktualnie zawartości + tekst "To łaskocze!".
Notabene można to skrócić do

element.innerHTML += " To łaskocze!";

i efekt będzie taki sam.

Zatem pierwsza linia nie wykonuje żadnych manipulacji na treści strony.