CODEWITHSUNDEEP
javascripthtml
krrish
krrish

Reputation: 89

onmouseover event on a button

I am new to HTML and javascript. I have written below code to execute over() of javascript when the mouse hovers over a button but the code is not working.

Kindly suggest some changes in the code to get the it running.

<html>
<head>
    <script type="text/javascript">
        function over()
        {
            document.getElementById("b1").value="You have hovered mouse over me";
        }
    </script>
</head>
<body>
    <button onmouseover="over()" id="b1">Hover mouse over me</button>
</body>

Upvotes: 2

Views: 28303

Answers (3)

wscourge
wscourge

Reputation: 11301

Your code does work.

The thing is, you will not see value change anywhere in the DOM. for that you should use <input type='submit' value='Hover mouse over me'/> instead, or change innerHTML of your <button> if you want to use a <button>.

.innerHTML on <button>

function over()
{
    document.getElementById("b1").innerHTML = "You have hovered mouse over me";
}
<button id="b1" onmouseenter="over()">Hower me</button>

value on <input type="submit">

function over()
{
    document.getElementById("b1").value = "You have hovered mouse over me";
}
<input id="b1" type="submit" onmouseenter="over()" value="Hower me">

Upvotes: 0

Sushen Suri
Sushen Suri

Reputation: 74

You need to replace text with innerHTML like this

<html>
<head>
    <script type="text/javascript">
        function over()
        {
            document.getElementById("b1").innerHTML="You have hovered mouse over me";
        }
    </script>
</head>
<body>
    <button onmouseover="over()" id="b1">Hover mouse over me</button>
</body>

Upvotes: 3

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

You should change the innerHTML of button element

document.getElementById("b1").innerHTML = "You have hovered mouse over me";

Your script works on <input type="button">

Upvotes: 1

Related Questions