2

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>
Shidersz
  • 16,846
  • 2
  • 23
  • 48
Kiko
  • 35
  • 2
  • By doing `function()` (with parentheses), you are *executing* the function, not *passing* it. Instead, do `onmouseover = function() { alert('Hello'); }` – Tyler Roper Dec 06 '18 at 04:17
  • Possible duplicate of [Why does click event handler fire immediately upon page load?](https://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load) – Nick Parsons Dec 06 '18 at 04:17

5 Answers5

2

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>
Udhay Titus
  • 5,761
  • 4
  • 23
  • 41
2

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>
holydragon
  • 6,158
  • 6
  • 39
  • 62
2

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>
Shidersz
  • 16,846
  • 2
  • 23
  • 48
2

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>
Mamun
  • 66,969
  • 9
  • 47
  • 59
-1

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>
David Davila
  • 129
  • 6