Когато създавате страници, понякога е необходимо, когато щракнете върху бутона, поставен на страницата, в браузъра да се случи някакво събитие, програмирано от автора. За да направите това, трябва да поставите JavaScript код в генерирания документ и да го обвържете с необходимия бутон. В зависимост от количеството код, което е необходимо за реализиране на предвиденото събитие, можете да използвате различни начини за свързване на бутона с кода.
Инструкции
Етап 1
Най-често извикванията на JavaScript код са обвързани със събитието onclick, тоест с щракването върху левия бутон на мишката. Ако не се нуждаете от много код, за да опишете действието, което трябва да се случи, тогава всичко това може да бъде поставено директно в маркера на бутона. Например, за да програмирате браузъра да показва обикновено съобщение при щракване върху бутон, JavaScript скриптът ще изглежда така: alert („Кодът работи!“) Необходим е само един израз и текст. Всичко това може лесно да бъде поставено в описанието на събитието onclick на маркера на бутона. В този случай най-простият HTML код на страницата може да изглежда така:
Бутон с код
Бутон с код
Стъпка 2
Не е практично да поставяте по-сложен JavaScript код директно в маркера на бутона. По-лесно е да направите отделна функция от него и да поставите повикването му в събитието onclick. Например, това може да изглежда като функция, която показва прозорец, съдържащ времето на щракване на бутон: function getTime () {
var сега = нова дата ();
alert ("Кодът работи в" + now.getHours () + ":" + now.getMinutes ());
} Трябва да се постави в заглавката на страницата (между етикетите и и). Пълният код на страницата с извикване на тази функция, свързана с бутона, може да изглежда така:
Бутон за извикване на функция
функция getTime () {
var сега = нова дата ();
alert ("Кодът работи в" + now.getHours () + ":" + now.getMinutes ());
}
Бутон за извикване на функция
Стъпка 3
Същият метод трябва да се използва, когато щракването върху няколко различни бутона трябва да предизвика събитие, което може да бъде описано със същия JavaScript код. Например можете леко да модифицирате предишната функция, за да добавите идентификацията на натиснатия бутон към полето за съобщения: функция getTime (btnString) {
var сега = нова дата ();
alert (btnString + "щракна в" + now.getHours () + ":" + now.getMinutes ());
} Пълният код за страница с три такива бутона може да изглежда така:
Три бутона с функционално повикване
функция getTime (btnString) {
var сега = нова дата ();
alert (btnString + "щракна" + now.getHours () + ":" + now.getMinutes ());
}
Първи бутон
Втори бутон
Трети бутон
