Tytu³: Zadarzenie on click Wiadomo¶æ wys³ana przez: admin Listopad 30, 2016, 10:55:10 Przyk³ad 1. Kod pokazuje jak uruchomiæ funkcje w JavaScript, zmieniaj±c± kolor przycisku po klikniêciu na niego. Przycisk "button", zosta³ wyposa¿ony w zdarzenie onclick. Zdarzenie onclick, powoduje, ¿e po najechaniu na przycisk kursorem myszki i klikniêciu na lewy klawisz mysz , uruchomiona zostanie funkcja uruchom(this). Argumentem funkcji (czyli tym co jest w nawiasie okrag³ym) jest zmienna this. Argument "this" oznacza, ¿e zmienne bêd± pobierane s± z elementu, który wywo³a³ funkcjê. W tym przypadku bêdzie to wci¶niêty przycisk. W dalszej czê¶ci funkcji wprowadzone jest polecenie x.style.bacgroundColor='yellow'. Oznacza, to ,¿e do obiektu x zostanie przypisany kolor t³a jako ¿ó³ty. W czasie wywo³ania funkcji za x podstawiany jest arument "this", czyli zmiana dotyczyæ bêdzie przycisku, który wywo³ywa³ funkcjê.
<html> <html lang="pl"> <head> <meta charset="UTF-8"> <link href="tabela.css" type="text/css" rel="stylesheet"> <title> ON click_event</title> </head> <body> <button onclick="uruchom(this)">Wci¶nij</button> <script> function uruchom(x) { x.style.color = 'red'; x.style.backgroundColor='yellow'; } </script> </body> <html> Tytu³: Odp: Zadarzenie on click Wiadomo¶æ wys³ana przez: admin Listopad 30, 2016, 12:17:33 Przyk³ad 2. Kod przedstawia wy¶wietlenia id wci¶niêtego klawisza. Wci¶niety klawisz o znanym id wy¶wietlany jest przez "alert".
<html> <html lang="pl"> <head> <meta charset="UTF-8"> <link href="tabela.css" type="text/css" rel="stylesheet"> <title> ON click_event</title> </head> <body> <button id="adam"onclick="uruchom(ewa.id)">Pierwszy</button> <button id="ewa" onclick="uruchom(this.id);"> Drugi</button> <script> function uruchom(x) { alert(x); } </script> </body> <html> |