HÖGTALARE 1: Nu i det sista exemplet, minns att vi varvat några JavaScript-kod på insidan av min HTML, specifikt insidan av värdet av attributet kallade On Submit för denna form taggen. Nu för små sidor, detta är inte så stor roll. Men som en webbsida blir längre och mer komplex, helt enkelt sätta din JavaScript-kod här och där inne av värdet av attribut inte är den bästa design. Bäst om vi faktor att ut och åtminstone lägga den inuti skripttagg centralt. 

Hur man gör detta? Nåväl låt oss återgå till mitt formulär tag och först ta bort detta attribut och dess värde helt och hållet. Sedan upp här, snarare än definierar en Funktionen kallas Greet, låt oss hänga på till kodraden som i slutändan vi kommer ändå vill köra och ersätta den Greet på följande funktioner. Document.get Element By ID citera unquote demo - där demo, minns, är det unika identifierare för själva formuläret - prick på skicka, som minns är namnet av händelsehanteraren där vi är intresserade. Och låt oss tilldela på skicka handler det värde som är faktiskt en fungera själv. 

Nu märker att jag faktiskt inte anropa en funktion här. Jag är i stället definiera en anonym, annars känd som en lambda-funktion, genom att ange mellan dessa klammerparenteser en massa kod som ska faktiskt verkställas. Specifikt den kod som jag skulle vilja att köra är den linjen som jag hade tidigare, och sedan ska vi lägga till det return false så att denna form är inte slutligen in till avsluta fjärr webben servern på det traditionella sättet. 

Låt oss nu spara filen, öppna den i en webbläsare, och se vad som händer. http://localhost/dom-1.html. Låt oss nu skriva in mitt namn, David, Submit. Och ingenting verkar ha hänt förutom webbadressen till min sida tycks har förändrats som om formen var faktiskt in till samma fil. 

Nu varför skulle det vara? Jo jag behöver lite mer information. Så låt oss gå vidare och öppna upp Chromes Utvecklarverktyg så att jag kan faktiskt titta på konsolen fönstret för att se om jag har gjort något fel. Jag kan komma åt det via ett par olika sätt. Varav en är via denna meny här, sedan under Verktyg, sedan ner till Utvecklarverktyg. 

Och märker här på fliken Konsol, det finns en ej infångade typ fel, kan inte satt egendom på skicka null. Nu varför skulle det vara? Väl tillbaka i min källkod här, meddelande som på submit jag tycker är en egenskap hos elementet, vars unik identifierare är demo. Ett element, återigen, är bara en nod i ett träd. 

Så det verkar som att min webbläsare inte tror att det elementet eller nod existerar ännu. Och faktiskt, det gör det inte. Minns att en webbsida analyseras eller läsa genom en webbläsare, uppifrån och ned, vänster till höger. Och så när JavaScript-kod är stött på, oftast, det avrättades direkt. 

Men i det här fallet, vi har inte ens fått yet till den del av dom, den HTML, där denna form med en unik identifierare demo har förklarats. Och så vi försöker köra min JavaScript-kod innan den noden till och med existerar i det träd som, naturligtvis, är problematiskt för då, säkert, själva elementet kommer att vara null vid denna tidpunkt. 

Så hur man fixar? Jo vi har ett par lösningar. Men låt oss försöka enklast genom att flytta mitt manus tagg från huvudet tagga till min kropp, men särskilt mot ner på min sida kropp så att det är lägre än de noder och frågor. Specifikt ska vi lyfta fram och skär den öppna etiketten och nära tag för skriptet och flytta det hela kodblock till botten av filen här. 

Nu är detta inte nödvändigtvis är den renaste designar, men åtminstone det kommer driva rätt ordning av verksamheten. Låt oss spara filen och ladda om i min webbläsare. Låt oss ladda om sidan, re-ingång mitt namn, och det är Hej David tillbaka.