What will be the basic JavaScript code for a button?

Question

I need a button that shows me a date below when I use hover mouse over it and hides it when I hover mouse out. Just like in the picture below:

Explain your requirement ... attaching a snap can not be way to ask a question .. — Moumit, Mar 17 '16 at 08:30
Possible duplicate of [Using an html button to call a javascript function](http://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function) — António Ribeiro, Mar 17 '16 at 08:49

score 0 · Answer 1 · answered Mar 17 '16 at 08:37

You can read more about event handling in javascript with https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener and fiddle with it a little. You will probably have to declare two listeners on your button, to the 'mouseenter' and 'mouseleave' event types (1st argument of addEventListener), and use the algorithms of your choice to be executed in the listener functions (2nd argument of addEventListener).

score 0 · Answer 2 · answered Mar 17 '16 at 11:31

Is this how you need?

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<p>SHOW / HIDE Date on mouseover</p>
<input type="button" value="SHOW / HIDE Date on mouseover" onmouseover="show();" onmouseleave="hide();">
<p id="demo"></p>
<script type="text/javascript">
    var show=function()
    {
          document.getElementById('demo').innerHTML=Date();
    };
    var hide=function()
    {
        document.getElementById('demo').style.display="none";
    };
</script>
</body>
</html>

but this works only one time. i again hover it, it doesnt work. — Ashish Dahiya, Mar 18 '16 at 19:17

score 0 · Answer 3 · answered Mar 21 '16 at 05:00

Add a bit of jquery:

Try this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<input type="button" value="SHOW / HIDE Date on mouseover" onmouseover="show();" onmouseleave="hide();">
<p id="demo"></p>
<script type="text/javascript">
$(document).ready(function(){
   $("input").mouseover(function(){
       $("p").show(document.getElementById("demo").innerHTML = Date());
   });
    $("input").mouseleave(function(){
       $("p").hide();
   });
});
</script>
</body>
</html>

What will be the basic JavaScript code for a button?

3 Answers3