Jak działa wydarzenie OnClick w JavaScript

Maja Kucharski

„„na kliknięcie”Wydarzenie wykonuje określoną funkcjonalność, gdy użytkownik kliknie element HTML. Działa na wszystkich rodzajach elementów HTML, z wyjątkiem , ,, , ,,, , , <br>, , I </strong> elementy.</p> <p>„„<strong>na kliknięcie</strong>„Wydarzenie jest najczęściej używane do wykonywania funkcji JavaScript na przycisku lub kliknięciu elementu. Umożliwia użytkownikom wywołanie funkcji JavaScript i wykonanie określonej akcji.</p> <p>Ten przewodnik pokaże cel i działanie „<strong>na kliknięcie</strong>„Wydarzenie w JavaScript.</p> <p>Jak działa wydarzenie OnClick w JavaScript?</p> <p>„„<strong>na kliknięcie</strong>„Zdarzenie umożliwia wykonanie funkcji JavaScript. Zwraca dane wyjściowe funkcji JavaScript, gdy użytkownik kliknie określony element.</p> <p>Składnia</p> <element onclick="function()">Kliknij</element> <p>W powyższej składni:</p> <ul> <li><strong>element</strong>: Określa konkretny element HTML, taki jak „<strong>P ”,„ H2 ”,„ H3</strong>"Itd.</li> <li><strong>funkcjonować()</strong>: Reprezentuje zdefiniowaną funkcję, która zostanie powołana na wyzwalacz zdarzenia.</li> </ul> <p>Poniższa sekcja pokaże działanie „<strong>na kliknięcie</strong>„Wydarzenie z pomocą różnych przykładów.</p> <p>Przykład 1: Zastosowanie zdarzenia „OnClick”, aby zmienić kolor tekstu akapitowy</p> <p>W tym scenariuszu „<strong>na kliknięcie</strong>„Wydarzenie może być powiązane z„<strong> <p>Kod HTML</p> <p>Najpierw spójrz na następujący kod HTML:</p> <h2 align="center"> Zmień kolor tekstu za pomocą zdarzenia „OnClick”</p><br><p onclick="sample()"> Kliknij ten akapit, aby zmienić jego kolor.</p> <p>W powyższym kodzie HTML:</p> <ul> <li>Najpierw dodaj podtytuł poziomu 2 przez „<strong><p></strong>„Tag i ustaw swoje wyrównanie na„<strong>Centrum</strong>".</li> <li>Następnie dołącz akapit z powiązanym „<strong>na kliknięcie</strong>„Przekierowanie zdarzenia do funkcji o nazwie„<strong>próbka()</strong>„To zostanie uruchomione po kliknięciu przycisku.</li> <li>Teraz dodaj „<strong><p></strong>„Tag, który określa akapit z identyfikatorem”<strong>test</strong>" I "<strong>na kliknięcie</strong>" wydarzenie.</li> <li>„„<strong>test</strong>”Wyświetla akapit o nowym kolorze tekstu.</li> <li>„„<strong>na kliknięcie</strong>„Zdarzenie przekierowuje się do funkcji„<strong>próbka()</strong>„To zostanie wywołane po kliknięciu akapitu.</li> </ul> <p>Kod JavaScript</p> <p>Teraz przejdźmy do bloku kodu JavaScript:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>W powyższym bloku kodu:</p> <ul> <li>Po pierwsze, zadeklaruj funkcję o nazwie „<strong>próbka()</strong>".</li> <li>W swojej definicji zastosuj „<strong>getElementById ()</strong>„Metoda dostępu do akapitu i zmiany jego koloru tekstu za pomocą„<strong>styl.kolor</strong>„Własność po kliknięciu akapitu.</li> </ul> <p>Wyjście</p> <p>Wyjście pokazuje zaktualizowany nowy kolor akapitu.</p> <p>Przykład 2: Zastosowanie zdarzenia „OnClick”, aby zmienić rozmiar czcionki tekstu i kolor tła</p> <p>Ten przykład dotyczy „<strong>na kliknięcie</strong>„Wydarzenie, aby dostosować akapit w taki sposób, aby tekst„<strong>rozmiar czcionki</strong>" I "<strong>kolor tła</strong>”Akapitu można zmodyfikować na spust zdarzenia.</p> <p>Kod HTML</p> <p>Najpierw postępuj zgodnie z danym kodem HTML:</p> <h2 align="center"> Zmień tekst tło Kolor za pomocą zdarzenia „OnClick”</p><br><p onclick="myfunc()"> Stuknij ten nagłówek, aby zmienić jego wielkość czcionki i kolor tła</p> <p>W powyższym kodzie HTML:</p> <ul> <li>„„<strong><p></strong>„Tworzy poziom 2 i.mi., Podtylanie wyrównane w „<strong>Centrum</strong>".</li> <li>„„<strong><p></strong>”Reprezentuje akapit z załączonym„<strong>na kliknięcie</strong>„Wydarzenie dostępu do funkcji JavaScript„<strong>myfunc ()</strong>".</li> </ul> <p>Kod JavaScript</p> <p>Teraz przejdź do następującego kodu JavaScript:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>W powyższych wierszach kodu:</p> <ul> <li>Zdefiniuj funkcję „<strong>myfunc ()</strong>".</li> <li>W swojej definicji „<strong>dokument.getElementById ()</strong>„Metoda dwukrotnie pobiera akapit i stosuje„ ”<strong>rozmiar czcionki</strong>" I "<strong>kolor tła</strong>”Właściwości modyfikowania akapitu po spustu zdarzenia.</li> </ul> <p>Wyjście</p> <p>Jak widać, „<strong>rozmiar czcionki</strong>”I„ „<strong>kolor tła</strong>„Akapitu został zmieniony.</p> <p>Przykład 3: Zastosowanie zdarzenia „OnClick” w celu skopiowania wartości pola wejściowego</p> <p>Tutaj "<strong>na kliknięcie</strong>„Zdarzenie można wykorzystać do kopiowania danych pola wejściowego.</p> <p>Kod HTML</p> <p>Najpierw sprawdź podany kod HTML:</p> <h3 align="center"> Skopiuj pole wejściowe za pomocą zdarzenia „OnClick”</p><br>Hasło: <br><br>Wprowadź: <br><br><br><button onclick="result()">Kopiuj hasło</button> <p>W powyższym kodzie HTML:</p> <ul> <li>Podobnie, określ podane nagłówek wyrównane do centrum.</li> <li>„„„Element o nazwie„<strong>Hasło</strong>”Typu„<strong>hasło</strong>”Ustawia hasło o wartości„<strong>Linuxhint12345</strong>”Z przypisanym identyfikatorem„<strong>Pass1</strong>". Wyświetli wspomnianą wartość hasła w polu wejściowym.</li> <li>Drugi "<strong>Ponownie wejść</strong>„Pole wejściowe ma również typ„<strong>Hasło</strong>”Z identyfikatorem„<strong>Pass2</strong>„Posiadanie zerowego atrybutu„ wartość ”.</li> <li>Utwórz także „<strong>przycisk</strong>" o imieniu "<strong>Kopiuj hasło</strong>„Posiadanie załączonego”<strong>na kliknięcie</strong>„Wydarzenie dostępu do funkcji JavaScript„<strong>wynik()</strong>".</li> </ul> <p>Kod JavaScript</p> <p>Teraz przegląd następujący kod JavaScript:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>W powyższych wierszach kodu:</p> <ul> <li>Dokonaj funkcji „<strong>wynik()</strong>".</li> <li>W swojej definicji zastosuj „<strong>dokument.getElementById ()</strong>„Metoda dwukrotnie skopiować wartość z poprzedniego”<strong>Hasło</strong>”Pole do tego ostatniego.</li> </ul> <p>Wyjście</p> <p>Zgodnie z analizą, podane „<strong>Hasło</strong>„Wartość została skopiowana do„<strong>Ponownie wejść</strong>”Pole tekstowe na przycisku.</p> <p>Przykład 4: Zastosowanie zdarzenia „OnClick”, aby wyświetlić bieżącą datę</p> <p>W tym przykładzie omówiono zdarzenie można wykorzystać do wyświetlania bieżącej daty systemu, odnosząc się do akapitu.</p> <p>Kod HTML</p> <p>Przeglądmy następujący kod HTML:</p> <h3 align="center"> Skopiuj pole wejściowe za pomocą zdarzenia „OnClick”</p><br><button onclick="fun()">Kliknij na to</button><br> <p>W powyższym kodzie HTML:</p> <ul> <li>Podobnie uwzględnij „<strong><p></strong>„Podtylanie.</li> <li>W następnym kroku utwórz znacznik przycisku o powiązanym „<strong>na kliknięcie</strong>„Przekierowanie zdarzenia do funkcji o nazwie„<strong>zabawa()</strong>„To zostanie uruchomione po kliknięciu przycisku.</li> <li>Potem „„<strong><p></strong>„Oznacza akapit zerowy przypisał identyfikator”<strong>test</strong>„Aby wyświetlić bieżącą datę systemu.</li> </ul> <p>Kod JavaScript</p> <p>Teraz przejdźmy do kodu JavaScript:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>W powyższych wierszach kodu:</p> <ul> <li>Funkcja o nazwie „<strong>zabawa()</strong>" definiuje.</li> <li>W definicji funkcji „<strong>dokument.getElementById ()</strong>„Metoda pobiera akapit za pomocą„<strong>ID</strong>”I wyświetla datę za pomocą wbudowanego„<strong>Data()</strong>”Funkcja i„<strong>InnerHtml</strong>" nieruchomość.</li> </ul> <p>Wyjście</p> <p>Powyższe wyjście pokazuje bieżącą datę systemu po kliknięciu przycisku.</p> <p>Wniosek</p> <p>JavaScript oferuje wbudowane „<strong>na kliknięcie</strong>„Wydarzenie, które uruchamia akcję po kliknięciu elementu HTML. Wywołuje funkcję JavaScript, aby wykonać określoną akcję na spust zdarzenia. Można go zaimplementować za pomocą przycisku lub innego elementu HTML, takiego jak „<strong><p>”,„</strong>"Itd. Ten post wyjaśnił użycie i funkcjonalność „<strong>na kliknięcie</strong>„Wydarzenie w JavaScript.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pl.cyberaxe.org/article/how-to-use-chrono-in-c">« Jak używać chrono w c++?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pl.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Jak przekonwertować ciąg na typ liczby całkowitej w Golang? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-inline-functions-in-c">Jak używać funkcji inline w C ++</a> </div> <div class="white-news__text"> Funkcja wbudowana odnosi się do umieszczenia kodu funkcji w miejscu, w którym wykonywane jest wywoła... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/igor-skrzypek">Igor Skrzypek</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/linux-commands">Polecenia Linux</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-install-package-with-deb-get-command-in-linux">Jak zainstalować pakiet z poleceniem Deb-Get w Linux</a> </div> <div class="white-news__text"> Deb-get to potężne narzędzie wiersza poleceń do instalowania pakietów w systemach Linux. Aby uzyskać... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/java">Jawa</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-scanner-nextline-in-java">Co to jest skaner.Następna linia w Javie</a> </div> <div class="white-news__text"> Metoda „NextLine ()” klasy skanera w Javie zwraca linię tekstową odczytaną z obiektu skanera i przen... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-do-i-convert-an-exception-to-a-string-in-python">Jak przekonwertować wyjątek na ciąg w Python</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/bertram-jozwiak">Bertram Jóźwiak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/ubuntu">Ubuntu</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-install-cuda-on-ubuntu-top-10-top-10-lts">Jak zainstalować CUDA w Ubuntu Top 10.10 najlepszych LTS</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-zaneta-pakula">Pani Żaneta Pakuła</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-regular-expressions-in-php">Jak używać wyrażeń regularnych w PHP</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">Jak można użyć Flexbox do utworzenia paska nawigacyjnego?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/maja-kucharski">Maja Kucharski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/powershell">PowerShell</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-set-variable-command-in-powershell">Jak używać polecenia set-variable w PowerShell</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-programming">Programowanie C</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-find-the-ascii-value-of-a-character-in-c-programming">Jak znaleźć wartość ASCII znaku w programowaniu C?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-constant-variables-in-c">Jakie są stałe zmienne w C#</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/java">Jawa</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/java-method-examples">Przykłady metody Java</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/igor-skrzypek">Igor Skrzypek</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/bash-programming">Programowanie bash</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-extract-part-of-a-string-using-bash-cut-and-split-commands">Jak wyodrębnić część łańcucha za pomocą poleceń Bash Cut i Podziel</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/bertram-jozwiak">Bertram Jóźwiak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-compile-and-run-a-c-program-in-a-linux-terminal">Jak skompilować i uruchomić program C ++ w terminalu Linux</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Witryna poświęcona systemowi operacyjnemu Linux. Tutaj znajdziesz wiele ciekawych artykułów i przydatnych poradników</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/python">Pyton</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/windows-os">System systemu Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/docker">Doker</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a></li> </li> <li class="menu-item"><a href="http://pl.cyberaxe.org/all-categories"><b>Wszystkie kategorie</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>