JavaScript Program to Demonstrate Mouse Text Over Effect and Button Click Event

JavaScript Program to Demonstrate Mouse Text Over Effect and Button Click Event

Write a JavaScript program to demonstrate mouse text over effect and button click event.



Source Code
<html> 
<head>
    <title>Mouse text over effect</title>
</head>

<body> 
<button id="btn">Click here</button> 

<p id="para" onmouseover="mouseOver()" onmouseout="mouseOut()">Hover over this Text !</p> 

<b id="output"></b> 

    <script>
        var x = document.getElementById("btn"); 

        x.addEventListener("click", btnClick); 

        function mouseOver() 
        { 
            document.getElementById("output").innerHTML += "MouseOver Event" + "<br>"; 
        } 

        function mouseOut() 
        { 
            document.getElementById("output").innerHTML += "MouseOut Event" + "<br>"; 
        } 

        function btnClick() 
        { 
            document.getElementById("output").innerHTML += "Click Event" + "<br>"; 
        } 
    </script>
</body> 

</html>
Output