CODEWITHSUNDEEP
javascripthtmlonmouseover
Kiko
Kiko

Reputation: 35

Onmouseover event is fired when not expected

I was learning javascript and experimenting with mouse events. In this code I am trying to manipulate the element when I put the mouse over it with the help of an alert box. However the problem is that the alert box is shown even when the mouse is not over the element.

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover=alert('Hello');
     
    </script>
</body>

</html>

Upvotes: 2

Views: 753

Answers (5)

Mamun
Mamun

Reputation: 68933

The issue is, the () after the alert function causes the function invocation on page load and you see the alert. Call the function inside of an anonymous function which will ensure that the function will be called only when the event (onmouseover) is fired:

document.getElementById("k").onmouseover = function(){alert('Hello')};
<a>dasdasd</a>
<p id="k">as</p>

Upvotes: 2

Shidersz
Shidersz

Reputation: 17190

The property onmouseover expect that you assing a function to it, instead you are assigning the evaluation of an expression, in this case: alert("hello"). So when the document loads, it evaluate that expression and the alert is shown, then a null value is assigned to the onmouseover property, that is the reason the alert only shows once.

For your goal, you can use an anonymous function to wrap the alert and assing it to the property. Check the next example:

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k" style="border: 1px solid red">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover = function() {alert('Hello')};
     
    </script>
</body>

</html>

Upvotes: 2

Udhay Titus
Udhay Titus

Reputation: 5869

try to add onmouseover="mouseover()" in <p>

       function mouseover() {
            alert('Hello');
         }


<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k" onmouseover="mouseover()">as</p>

    <script type="text/javascript">
    	function mouseover() {
     alert('Hello');
     }
    </script>
</body>

</html>

Upvotes: 2

David Davila
David Davila

Reputation: 129

Try this (with JQuery):

$(document).ready(function(){
    $("p").mouseover(function(){
        alert("Hello");
    });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

Upvotes: -1

holydragon
holydragon

Reputation: 6728

You need to put it in a function like so.

<!DOCTYPE html>
<html>

<head>
    <title>testing</title>
</head>

<body>
    <a>dasdasd</a>
    <p id="k">as</p>

    <script type="text/javascript">
    	
     document.getElementById("k").onmouseover = function(){alert('Hello')};
     
    </script>
</body>

</html>

Upvotes: 2

Related Questions