|
|
The
onclick
event attribute in HTML is used to execute a script, typically a JavaScript function, when a user clicks on an HTML element. It is a fundamental part of creating interactive web pages, allowing developers to define actions that occur in response to user clicks. |
Example of HTML onclick Event Attribute
It will Execute a JavaScript when a button is clicked.
index.html
Example:
HTML
<button onclick="myFunction()">Click me</button>
Output should be:
Definition and Usage of Definition and Usage
The onclick attribute fires on a mouse click on the element.
Browser Support of HTML onclick Event Attribute
Syntax of HTML onclick Event Attribute
<
element
onclick="
script
">
Attribute Values of HTML onclick Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onclick |
Technical Details of HTML onclick Event Attribute
| Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
|---|
How to Execute a JavaScript when a button is clicked
A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".</p>
<script>
function myFunction() { document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
Output should be:
How to Click on a <p> element to change its text color to red
Click me to change my text color.
A function is triggered when the p element is clicked. The function sets the color of the p element to red.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<p>A function is triggered when the p element is clicked. The function sets the color of the p element to red.</p>
<script>
function myFunction() { document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>
Output should be:
How to Click on a button to copy some text from an input field to another input field
A function is triggered when the button is clicked. The function copies the text from Field1 into Field2.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="myFunction()">Copy Text</button>
<p>A function is triggered when the button is clicked. The function copies the text from Field1 into Field2.</p>
<script>
function myFunction() { document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
</body>
</html>
Output should be:
| html browsers support |
| List of Mouse Events Attribute | HTML Mouse Events Attribute |
| HTML onclick Event Attribute | HTML Mouse Events Attribute |
| HTML ondblclick Event Attribute | HTML Mouse Events Attribute |
| HTML onmousedown Event Attribute | HTML Mouse Events Attribute |
| HTML onmousemove Event Attribute | HTML Mouse Events Attribute |
| HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| HTML onmouseover Event Attribute | HTML Mouse Events Attribute |
| HTML onmouseup Event Attribute | HTML Mouse Events Attribute |
| HTML onwheel Event Attribute | HTML Mouse Events Attribute |
| Example of HTML onclick Event Attribute | HTML Mouse Events Attribute |
| Definition and Usage of Definition and Usage | HTML Mouse Events Attribute |
| Browser Support of HTML onclick Event Attribute | HTML Mouse Events Attribute |
| Syntax of HTML onclick Event Attribute | HTML Mouse Events Attribute |
| Attribute Values of HTML onclick Event Attribute | HTML Mouse Events Attribute |
| Technical Details of HTML onclick Event Attribute | HTML Mouse Events Attribute |
| How to Execute a JavaScript when a button is clicked | HTML Mouse Events Attribute |
| How to Click on a <p> element to change its text color to red | HTML Mouse Events Attribute |
| How to Click on a button to copy some text from an input field to another input field | HTML Mouse Events Attribute |
|
Type
: |
Develop |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Mouse Events Attribute |
|
Uploaded by
: |
Admin |
Read Article https://horje.com/learn/1434/reference