Sådan Oprettes En Knap Med En Kode

Indholdsfortegnelse:

Sådan Oprettes En Knap Med En Kode
Sådan Oprettes En Knap Med En Kode

Video: Sådan Oprettes En Knap Med En Kode

Video: Sådan Oprettes En Knap Med En Kode
Video: Sådan oprettes en COS konto 2024, Kan
Anonim

Når du opretter sider, er det undertiden nødvendigt, at når du klikker på knappen, der er placeret på siden, sker der en begivenhed, der er programmeret af forfatteren, i browseren. For at gøre dette skal du placere JavaScript-kode i det genererede dokument og binde den til den ønskede knap. Afhængigt af den mængde kode, der kræves for at implementere den tilsigtede begivenhed, kan du bruge forskellige måder til at forbinde knappen til koden.

Sådan oprettes en knap med en kode
Sådan oprettes en knap med en kode

Instruktioner

Trin 1

Oftest er JavaScript-kodeopkald bundet til onclick-begivenheden, det vil sige til klik på venstre museknap. Hvis du ikke har brug for en masse kode for at beskrive den handling, der skal ske, kan alt dette placeres direkte i knapkoden. For eksempel for at programmere browseren til at vise en simpel besked, når der klikkes på en knap, vil JavaScript-scriptet se sådan ud: alarm ('Koden fungerede!') Det tager kun en sætning og tekst. Alt dette kan let placeres i onclick-begivenhedsbeskrivelsen af knappen tag. I dette tilfælde kan den enkleste HTML-kode på siden se sådan ud:

Knap med kode

Knap med kode

Trin 2

Det er ikke praktisk at placere mere kompleks JavaScript-kode direkte i knapkoden. Det er lettere at lave en separat funktion ud af det og placere sit opkald i onclick-begivenheden. For eksempel kan dette ligne en funktion, der viser et vindue, der indeholder tidspunktet for et klik på en knap: funktion getTime () {

var nu = ny dato ();

alarm ("Koden fungerede i" + now.getHours () + ":" + now.getMinutes ());

} Den skal placeres i sidens overskrift (mellem tags og). Den komplette kode på siden med et opkald til denne funktion bundet til knappen kan se sådan ud:

Funktionskaldeknap

funktion getTime () {

var nu = ny dato ();

alarm ("Koden fungerede i" + now.getHours () + ":" + now.getMinutes ());

}

Funktionskaldeknap

Trin 3

Den samme metode skal bruges, når der klikkes på flere forskellige knapper, skal der opstå en begivenhed, der kan beskrives med den samme JavaScript-kode. For eksempel kan du ændre den foregående funktion lidt for at tilføje identifikationen af den trykkede knap til meddelelsesboksen: funktion getTime (btnString) {

var nu = ny dato ();

alarm (btnString + "klikket på" + now.getHours () + ":" + now.getMinutes ());

} Den komplette kode for en side med tre sådanne knapper kan se sådan ud:

Tre knapper med et funktionsopkald

funktion getTime (btnString) {

var nu = ny dato ();

alarm (btnString + "klikket på" + now.getHours () + ":" + now.getMinutes ());

}

Første knap

Anden knap

Tredje knap

Anbefalede: