How to Execute a JavaScript when pressing a mouse button over a paragraph

Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets the color of the text to green.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets the color of the text to green.
</p>

<script>
function mouseDown() {
  document.getElementById("p1").style.color = "red";
}

function mouseUp() {
  document.getElementById("p1").style.color = "green";
}
</script>

</body>
</html>

Output should be:

Single Articles

Example of HTML onmousedown Event Attribute	Mouse Events Attribute
Definition and Usage of HTML onmousedown Event Attribute	Mouse Events Attribute
Browser Support of HTML onmousedown Event Attribute	Mouse Events Attribute
Syntax of HTML onmousedown Event Attribute	Mouse Events Attribute
Attribute Values of HTML onmousedown Event Attribute	Mouse Events Attribute
Technical Details of HTML onmousedown Event Attribute	Mouse Events Attribute
How to Execute a JavaScript when pressing a mouse button over a paragraph	Mouse Events Attribute

List of Mouse Events Attribute	Mouse Events Attribute
What is HTML onclick Event Attribute	Mouse Events Attribute
What is HTML ondblclick Event Attribute	Mouse Events Attribute
What is HTML onmousedown Event Attribute	Mouse Events Attribute
What is HTML onmousemove Event Attribute	Mouse Events Attribute

Type:	Html
Category:	Web Tutorial
Sub Category:	Mouse Events Attribute
Uploaded by:	Admin