How to Execute a JavaScript when releasing 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:

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