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