Hoe Om 'n Knoppie Met 'n Kode Te Maak

INHOUDSOPGAWE:

Hoe Om 'n Knoppie Met 'n Kode Te Maak
Hoe Om 'n Knoppie Met 'n Kode Te Maak

Video: Hoe Om 'n Knoppie Met 'n Kode Te Maak

Video: Hoe Om 'n Knoppie Met 'n Kode Te Maak
Video: HOE MAAK JE EEN KOM UIT KNOPPEN ! ✓ F. DIY 2024, Mei
Anonim

Wanneer u bladsye skep, is dit soms nodig dat wanneer u op die knoppie in die bladsy klik, 'n gebeurtenis wat deur die outeur geprogrammeer is, in die blaaier voorkom. Om dit te doen, moet u JavaScript-kode in die gegenereerde dokument plaas en dit aan die vereiste knoppie bind. Afhangend van die hoeveelheid kode wat benodig word om die beoogde gebeurtenis te implementeer, kan u verskillende maniere gebruik om die knoppie aan die kode te koppel.

Hoe om 'n knoppie met 'n kode te maak
Hoe om 'n knoppie met 'n kode te maak

Instruksies

Stap 1

JavaScript-kode-oproepe word meestal gebind aan die onclick-gebeurtenis, dit wil sê met die klik op die linkermuisknop. As u nie veel kode nodig het om die aksie te beskryf wat moet gebeur nie, kan dit alles direk in die knoppie-etiket geplaas word. Om byvoorbeeld die blaaier te programmeer om 'n eenvoudige boodskap te wys as daar op 'n knoppie geklik word, sal die JavaScript-script so lyk: waarskuwing ('Code werk!') Dit benodig slegs een verklaring en teks. Dit alles kan maklik in die onclick-gebeurtenisbeskrywing van die knoppieplaatjie geplaas word. In hierdie geval kan die eenvoudigste HTML-kode van die bladsy so lyk:

Knoppie met kode

Knoppie met kode

Stap 2

Dit is nie prakties om ingewikkelder JavaScript-kode direk in die knoppie-kode te plaas nie. Dit is makliker om 'n aparte funksie daaruit te maak en sy oproep in die onclick-gebeurtenis te plaas. Dit kan byvoorbeeld lyk soos 'n funksie wat 'n venster bevat wat die tyd bevat van 'n klik op 'n knop: funksie getTime () {

var nou = nuwe datum ();

waarskuwing ("Die kode het in" + now.getHours () + "gewerk:" + now.getMinutes ());

} Dit moet in die kopkop van die bladsy geplaas word (tussen die tags en). Die volledige kode van die bladsy met 'n oproep na hierdie funksie wat aan die knoppie gebind is, kan so lyk:

Funksie-oproepknoppie

funksie getTime () {

var nou = nuwe datum ();

waarskuwing ("Die kode het in" + now.getHours () + "gewerk:" + now.getMinutes ());

}

Funksie-oproepknoppie

Stap 3

Dieselfde metode moet gebruik word as u op verskillende knoppies klik om 'n gebeurtenis te laat ontstaan wat met dieselfde JavaScript-kode beskryf kan word. U kan die vorige funksie byvoorbeeld effens verander om die identifikasie van die gedrukte knoppie by die boodskapkas te voeg: funksie getTime (btnString) {

var nou = nuwe datum ();

waarskuwing (btnString + "geklik in" + now.getHours () + ":" + now.getMinutes ());

} Die volledige kode vir 'n bladsy met drie sulke knoppies kan so lyk:

Drie knoppies met 'n funksie-oproep

funksie getTime (btnString) {

var nou = nuwe datum ();

waarskuwing (btnString + "geklik in" + now.getHours () + ":" + now.getMinutes ());

}

Eerste knoppie

Tweede knoppie

Derde knoppie

Aanbeveel: