Wie funktioniert die Onclick -Veranstaltung in JavaScript?

Der "ONCLICKEreignis führt eine bestimmte Funktionalität aus, wenn der Benutzer auf ein HTML -Element klickt. Es funktioniert bei allen Arten von HTML -Elementen außer den , ,, , ,,, , , <br>, , Und </strong> Elemente.</p> <p>Der "<strong>ONCLICK</strong>”Ereignis wird hauptsächlich für die Ausführung der JavaScript -Funktion auf der Schaltfläche oder dem Element -Klick verwendet. Es ermöglicht den Benutzern, eine JavaScript -Funktion aufzurufen und die angegebene Aktion auszuführen.</p> <p>Dieser Leitfaden zeigt das Ziel und die Arbeit der “<strong>ONCLICK</strong>Ereignis in JavaScript.</p> <p>Wie funktioniert die Onclick -Veranstaltung in JavaScript??</p> <p>Der "<strong>ONCLICK</strong>Ereignis ermöglicht die Ausführung der JavaScript -Funktion. Es gibt die Ausgabe der JavaScript -Funktionen zurück, wenn der Benutzer auf das angegebene Element klickt.</p> <p>Syntax</p> <element onclick="function()">Klicken</element> <p>In der obigen Syntax:</p> <ul> <li><strong>Element</strong>: Es gibt das jeweilige HTML -Element an, wie sie "<strong>P ”,„ H2 “,„ H3</strong>" usw.</li> <li><strong>Funktion()</strong>: Es repräsentiert die definierte Funktion, die auf den Ereignisauslöser aufgerufen wird.</li> </ul> <p>Der folgende Abschnitt zeigt die Arbeit der “<strong>ONCLICK</strong>Ereignis mit Hilfe verschiedener Beispiele.</p> <p>Beispiel 1: Anwenden des Ereignisses „Onclick“, um die Absatztextfarbe zu ändern</p> <p>In diesem Szenario eine "<strong>ONCLICK</strong>"Ereignis kann mit" in Verbindung gebracht werden "<strong> <p>HTML Quelltext</p> <p>Schauen Sie sich zunächst den folgenden HTML -Code an:</p> <h2 align="center"> Ändern Sie die Textfarbe mit "Onclick" -Ereignis</p><br><p onclick="sample()"> Klicken Sie auf diesen Absatz, um seine Farbe zu ändern.</p> <p>Im obigen HTML -Code:</p> <ul> <li>Fügen Sie zunächst eine Unterschrift von Level 2 über die “hinzu“<strong><p></strong>"Tag und setzen Sie seine Ausrichtung auf"<strong>Center</strong>”.</li> <li>Fügen Sie als nächstes einen Absatz mit einem zugeordneten "hinzu“<strong>ONCLICK</strong>"Ereignis, das zur genannten Funktion umgeleitet wird"<strong>Probe()</strong>”Das wird beim Klicken der Schaltfläche ausgelöst.</li> <li>Fügen Sie jetzt das hinzu “<strong><p></strong>"Tag, das einen Absatz mit einer ID angibt"<strong>prüfen</strong>" Und "<strong>ONCLICK</strong>" Fall.</li> <li>Der "<strong>prüfen</strong>”Zeigt den Absatz mit einer neuen Textfarbe an.</li> <li>Der "<strong>ONCLICK</strong>"Ereignis leitet zur Funktion um"<strong>Probe()</strong>Das wird im Absatzklick ausgelöst.</li> </ul> <p>JavaScript -Code</p> <p>Gehen wir nun zum JavaScript -Code -Block über, um:</p> <script><br>function sample() <br>document.getElementById("test").style.color = "green";<br><br></script> <p>Im obigen Codeblock:</p> <ul> <li>Erstens, deklarieren Sie eine Funktion namens “<strong>Probe()</strong>”.</li> <li>Wenden Sie in seiner Definition das an “<strong>GetElementById ()</strong>Methode, um auf den Absatz zuzugreifen und seine Textfarbe über die “zu ändern<strong>Stil.Farbe</strong>Eigenschaft beim Klicken auf den Absatz.</li> </ul> <p>Ausgang</p> <p>Die Ausgabe zeigt die aktualisierte neue Farbe des Absatzes.</p> <p>Beispiel 2: Anwenden des Ereignisses „Onclick“, um die Text- und Hintergrundfarbe der Textschrift zu ändern</p> <p>Dieses Beispiel wendet das an “<strong>ONCLICK</strong>"Ereignis zum Anpassen des Absatzes so, dass der Text"<strong>Schriftgröße</strong>" Und "<strong>Hintergrundfarbe</strong>”Eines Absatzes kann auf dem Ereignisauslöser geändert werden.</p> <p>HTML Quelltext</p> <p>Folgen Sie zunächst dem angegebenen HTML -Code:</p> <h2 align="center"> Ändern Sie die Farbe des Texthintergrunds mit dem "Onclick" -Event</p><br><p onclick="myfunc()"> Tippen Sie auf diese Überschrift, um ihre Schriftgröße und die Hintergrundfarbe zu ändern</p> <p>Im obigen HTML -Code:</p> <ul> <li>Der "<strong><p></strong>”Erstellt die Level 2 i.e., Unterschrift ausgerichtet an “<strong>Center</strong>”.</li> <li>Der "<strong><p></strong>"Repräsentiert den Absatz mit einem Anhang"<strong>ONCLICK</strong>"Ereignis zugreift auf die JavaScript -Funktion"<strong>myfunc ()</strong>”.</li> </ul> <p>JavaScript -Code</p> <p>Gehen Sie nun mit dem folgenden JavaScript -Code fort:</p> <script><br>function myfunc() <br>document.getElementById("first").style.fontSize = "22px";<br>document.getElementById("first").style.backgroundColor = "yellow";<br><br></script> <p>In den obigen Codezeilen:</p> <ul> <li>Definieren Sie die Funktion “<strong>myfunc ()</strong>”.</li> <li>In seiner Definition das “<strong>dokumentieren.GetElementById ()</strong>Die Methode holt den Absatz zweimal über seine ID ab und wendet die “an<strong>Schriftgröße</strong>" Und "<strong>Hintergrundfarbe</strong>Eigenschaften, um den Absatz am Ereignisauslöser zu ändern.</li> </ul> <p>Ausgang</p> <p>Wie gesehen, das "<strong>Schriftgröße</strong>" und das "<strong>Hintergrundfarbe</strong>Das Absatz wurde geändert.</p> <p>Beispiel 3: Anwenden des Ereignisses „Onclick“, um den Eingabefeldwert zu kopieren</p> <p>Hier das "<strong>ONCLICK</strong>Das Ereignis kann verwendet werden, um die Eingabefelddaten zu kopieren.</p> <p>HTML Quelltext</p> <p>Überprüfen Sie zunächst den angegebenen HTML -Code:</p> <h3 align="center"> Kopieren Sie das Eingangsfeld mit "Onclick" -Ereignis</p><br>Passwort: <br><br>Erneut eingeben: <br><br><br><button onclick="result()">Passwort kopieren</button> <p>Im obigen HTML -Code:</p> <ul> <li>Geben Sie ebenso die angegebene Überschrift an, die an der Mitte ausgerichtet ist.</li> <li>Der ""Element" namens "<strong>Passwort</strong>”Vom Typ“<strong>Passwort</strong>"Legt ein Passwort mit dem Wert fest"<strong>LinuxHint12345</strong>"Mit einer zugewiesenen ID"<strong>Pass1</strong>”. Es wird den genannten Kennwortwert im Eingabefeld angezeigt.</li> <li>Der Zweite "<strong>Erneut eingeben</strong>"Eingangsfeld hat auch einen Typ"<strong>Passwort</strong>"Mit einer ID"<strong>Pass2</strong>"Ein Null -" -Strieb -Attribut haben.</li> <li>Erstellen Sie auch eine “<strong>Taste</strong>" genannt "<strong>Passwort kopieren</strong>"Angehängt haben"<strong>ONCLICK</strong>"Ereignis zugreift auf die JavaScript -Funktion"<strong>Ergebnis()</strong>”.</li> </ul> <p>JavaScript -Code</p> <p>Überprüfen Sie nun den folgenden JavaScript -Code:</p> <script><br>function result() <br>document.getElementById("pass2").value = document.getElementById("pass1").value;<br><br></script> <p>In den obigen Codezeilen:</p> <ul> <li>Die Funktion deklarieren “<strong>Ergebnis()</strong>”.</li> <li>Wenden Sie in seiner Definition das an “<strong>dokumentieren.GetElementById ()</strong>"Methode zweimal, um den Wert aus dem ersteren zu kopieren"<strong>Passwort</strong>Feld bis letzter.</li> </ul> <p>Ausgang</p> <p>Wie analysiert, das gegeben “<strong>Passwort</strong>"Wert wurde in die" kopiert "<strong>Erneut eingeben</strong>”Textfeld auf der Schaltfläche Klicken Sie auf.</p> <p>Beispiel 4: Anwenden des Ereignisses „Onclick“, um das aktuelle Datum anzuzeigen</p> <p>In diesem Beispiel kann das diskutierte Ereignis verwendet werden, um das aktuelle Datum des Systems anzuzeigen, indem sich auf den Absatz bezieht.</p> <p>HTML Quelltext</p> <p>Überlegen wir den folgenden HTML -Code:</p> <h3 align="center"> Kopieren Sie das Eingangsfeld mit "Onclick" -Ereignis</p><br><button onclick="fun()">Klick es an</button><br> <p>Im obigen HTML -Code:</p> <ul> <li>In ähnlicher Weise geben Sie eine “ein“<strong><p></strong>Unterschrift.</li> <li>Erstellen Sie im nächsten Schritt ein Schaltflächen -Tag mit einem zugeordneten “<strong>ONCLICK</strong>"Ereignis, das zur genannten Funktion umgeleitet wird"<strong>Spaß()</strong>”Das wird beim Klicken der Schaltfläche ausgelöst.</li> <li>Danach das "<strong><p></strong>”Bezeichnet den Null -Absatz, der eine ID zugewiesen hat“<strong>prüfen</strong>Um das aktuelle Datum des Systems anzuzeigen.</li> </ul> <p>JavaScript -Code</p> <p>Gehen wir nun mit dem JavaScript -Code über, dass sie:</p> <script><br>function fun() <br>document.getElementById('test').innerHTML= Date();<br><br></script> <p>In den obigen Codezeilen:</p> <ul> <li>Eine Funktion namens “<strong>Spaß()</strong>" ist definiert.</li> <li>In der Funktionsdefinition die “<strong>dokumentieren.GetElementById ()</strong>"Methode holt den Absatz über seine" ab "<strong>Ausweis</strong>"Und zeigt das Datum mit dem integrierten" an "<strong>Datum()</strong>”Funktion und die“<strong>Innerhtml</strong>" Eigentum.</li> </ul> <p>Ausgang</p> <p>Die obige Ausgabe zeigt das aktuelle Datum des Systems bei der Schaltfläche Klick an.</p> <p>Abschluss</p> <p>JavaScript bietet das integrierte “<strong>ONCLICK</strong>Ereignis, das eine Aktion auf das HTML -Element klickt. Es ruft die JavaScript -Funktion auf, um die angegebene Aktion mit dem Ereignisauslöser auszuführen. Es könnte mit der Taste oder einem anderen HTML -Element wie so implementiert werden “<strong><p>","</strong>" usw. Dieser Beitrag erklärte die Verwendung und Funktionalität der “<strong>ONCLICK</strong>Ereignis in 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://www.cyberaxe.org/article/how-to-use-chrono-in-c">« Wie man Chrono in C verwendet++?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">So konvertieren Sie die Zeichenfolge in Golang in Ganzzahltyp? »</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://www.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/what-are-constants-in-golang">Was sind Konstanten in Golang?</a> </div> <div class="white-news__text"> In der GO -Sprache sind Konstanten Variablen mit festen Werten, die während der Programmausführung n... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-while-loop-in-php">Wie man während der Schleife in PHP verwendet?</a> </div> <div class="white-news__text"> Die while -Schleife ist ein entscheidendes Konzept, das verwendet wird, um einen Codeblock wiederhol... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/stephan-harms">Stephan Harms</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-polymorphism-in-c">Wie man Polymorphismus in C# verwendet</a> </div> <div class="white-news__text"> Polymorphismus ermöglicht es, Objekte verschiedener Klassen zu behandeln, als wären sie aus derselbe... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/arved-riermeier">Arved Riermeier</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://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/python-list-to-comma-separated-string">Python -Liste zu comma getrennter Zeichenfolge</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-chrono-in-c">Wie man Chrono in C verwendet++?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-fetch-php-timezone-list">So holen Sie die PHP -TimeZone -Liste</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-getelementsbytagname-method-in-javascript">Verwendung von GetElementsByTagName -Methoden in JavaScript</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">Was ist ein undefinierter Indexfehler in PHP und wie man ihn behebt??</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-install-oracle-sql-developer-on-windows">So installieren Sie Oracle SQL Developer unter Windows?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-add-and-play-videos-on-a-webpage-using-html">So fügen Sie Videos auf einer Webseite mit HTML hinzu und spielen Sie Videos ab?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-get-adprincipalgroupmembership--in-powershell">So verwenden Sie Get-Adprincipalgroupmitglieder in Powershell</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-long-keyword-in-c">So verwenden Sie ein langes Schlüsselwort in C#</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-boolean-expressions-in-c">So verwenden Sie Boolesche Ausdrücke in C ++</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li> </li> <li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</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>