In HTML, we have a button for submitting the user-request data to the server(backend) to validate and navigate the web pages. Mainly, if we use the onclick button for event attributes and is supported by all the browsers, So is the browser compatibility feature wherever we use this event function in our scripts. The event appears when the user clicks on the tag, it will be used and need to add the onclick event in the element. Then the button tag runs on the script when the button is called or clicked by the user end. It runs on the specific lines of code in the HTML object that has the onclick attribute.
Working of onclick Button
Mainly it will be used for triggering and call the function wherever the user needs to click on the button. If the user clicks on the mouse through the element in the Onclick event, it will call the functions like Javascript, etc.…The onclick event attribute basically contains only one value for the script which works on the backend of the event.
Syntax:
<button name="" value="" onclick<strong> ="</strong>function()"/>
The above syntax is the basic usage of the onclick event in the html attributes. We also customized the event wherever we need which is the user requirements.
Examples of HTML onclick Button
Below given are the examples of the onclick button in html:
Example #1
Code:
<html>
<body>
<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>
Output:
In the above example, we have created the javascript function; additionally, when the user clicks the button “click”, it will display the value “Welcome” in the browser itself.
Example #2
Code:
<html>
<body>
<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>
</body>
</html>
Output:
The above example is also the same as we discussed in the previous example 1, but here we are not using any tag, instead of that we directly call the function and event in the tag(paragraph) tag. So it will reduce the lines of code.
Example #3
Code:
<html>
<body>
Username: <input type="text" id="user" value="sivaraman" ><br>
Password: <input type="text" id="pass"><br><br>
<button onclick="Function()">Click</button>
<script>
function Function() {
document.getElementById("pass").value = document.getElementById("user").value;
}
</script>
</body>
</html>
Output:
In the example above, we called the JavaScript function to copy the values from username to password after selecting the “click” button that is automatically copied from username to password. It is one of the basic operations for the onclick event.
OnClick Event in Various Events
The onclick property attributes used by some other events, such as the global event handler, are also one of the event handler mechanisms under the Event handler used to process click events in HTML Elements. Whenever the click event is raised after the user request, it fires after the mouse down and mouse up events in some order.
Click Event also have some triggers action; consider adding the same action to the “key-down” event is allowed to use the same action by a user who does not use a mouse pointer or even a touch screen. We have some inbuild functions in javascript for onclick events.
If the function receives the MouseEvent object as its sole argument, this function will also be the event’s elements to be triggered. Only one click event handler will be assigned for a single object at a time. If you use EventTarget.addEventListener() methods,since it’s more flexible.
For Example, if we want to change the colors of the given values after a click.
<html>
<body>
<div id="example">Click</div>
<script>
document.getElementById('example').onclick = function changeContent() {
document.getElementById('example').innerHTML = "Welcome to my domain";
document.getElementById('example').style = "Color: green";
}
</script>
</body>
</html>
Output:
Im obigen Beispiel haben wir lediglich ein Klickereignis aufgerufen, um die Textfarben auf den Bildschirmen des Benutzers zu ändern. Wie viele Ereignisauslösefunktionen kann es sowohl für den Laufzeitprospekt als auch für Benutzeranforderungen nützlich sein.
Onclick Event ist auch ein Attribut für die Bildobjekte; Außerdem enthält es einen Ausdruck, der ausgewertet wird, wenn der Benutzer auf die Schaltfläche oder Bildobjekte klickt. Das onclick-Ereignis führt auch verschiedene Dinge aus, je nachdem, auf welchen Teil eines Bildes der Benutzer klicken soll. Im Allgemeinen kann der Handler in HTML-Attributen wie festgelegt werden. Wenn der Benutzer mit dem Mauszeiger klickt, wird der Code in onclick ausgeführt. Bei HTML-Attributnamen wird die Groß-/Kleinschreibung nicht beachtet, daher funktioniert onclick wie onClick, aber normalerweise werden die Attribute in Kleinbuchstaben verwendet.
Wenn wir das Formular-Tag verwenden, um auf die Webseiten zuzugreifen, genauso wie wenn wir auf die Schaltfläche „Verschieben“ klicken, kann der Controller die Benutzeranforderungen in der Backend-Logik validieren und die Ergebnisansicht anzeigen. Außerdem wird die Webseite neu geladen. Manchmal funktioniert das OnClick-Ereignis bei den Javascript-Validierungen nicht, d. h. es wird die HTML-Seite überall dort skriptiert, wo die Funktionen im OnClick-Ereignis aufgerufen werden. Der Benutzer muss überprüft und auch umbenannt werden. Die Funktion funktioniert zu diesem Zeitpunkt nicht, wenn die Funktion OnClick() definiert ist Die Benutzereingaben oder Like-Buttons erhalten eine höhere Priorität als die Javascript-Funktionen.
Hier ein paar Vorschläge, die für die Verwendung des onclick-Ereignisses in den HTML-Tags hilfreich sein müssen.
1. Verwenden Sie nicht onclick=“javascript:function()“, sondern nur das Präfix javascript : like innerhalb des Attributs like href hyperlink:
2. Wir enden nicht mit einem Semikolon wie onclick=“ function()“ und onclick=“ function();“ Beides wird gut funktionieren, aber es ist keine gute Praxis, Semikolons für Funktionsenden zu verwenden.
3. Ereignisattribute wie „onclick“, „onCLICK“ und „ONCLICK“ funktionieren alle, aber in der gängigen Praxis schreiben wir die Attribute in Kleinbuchstaben, sogar in Javascript selbst muss die Groß-/Kleinschreibung beachtet werden. Wenn wir wie „document.getElementById().onclick=“ schreiben, müssen alle so sein der Kleinbuchstabe.
Fazit
onclick ist auch der Ereignisauslöser in den Javascript-Funktionen; Dies kann für Benutzervalidierungen und die Navigation auf Webseiten hilfreich sein. In jquery verwenden wir auch den Onclick-Ereignisakt als Hauptbestandteil der benutzerdefinierten Anforderungen. React JS und Angular sind weitere Frameworks, die wir in Onclick-Funktionen verwenden. Es unterstützt auch die meisten modernen Browser heutzutage wie Google Chrome, Mozilla Firefox und Safari usw. In Javascript können wir nicht nur Onclick-Ereignisfunktionen verarbeiten, sondern es kann auch für einige andere Attribute wie „on select, onsubmit, ontoggle,onkeyup“ usw. Basierend auf den Benutzeranforderungen können wir die Ereignisattribute im HTML verwenden.
Das obige ist der detaillierte Inhalt vonHTML-Onclick-Button. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
