CODEWITHSUNDEEP
javascript
Kevin L
Kevin L

Reputation: 7

Changing position using onmouseover

<!DOCTYPE html>
<html>
    <head>
        <title>Button Homework</title>
        
        <script>
            function first()    {
                document.getElementById('type1').style.left= "100px";
            }
            
            function second()   {
                document.getElementById('type1').style.position = 'absolute';
            }
        </script>
    </head>
    <body>
        <h1>Special Button</h1>
        
        <input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
                            onmouseover= 'first'() onmouseout= 'second'();' />
    </body>
</html>

I'm trying to get my button to move to the middle whenever you hover over it but I can't seem to do so. That's my coding, can someone please help me out? thanks!

Upvotes: 0

Views: 60

Answers (1)

Rajdeep D
Rajdeep D

Reputation: 3920

You need to have position:absolute to make left css property work. Also I corrected your function call in input field, please check

<script>
           
            function first()    {
                    let randomValue1 = Math.floor(Math.random()*255);
                    let randomValue2 = Math.floor(Math.random()*255);
                    let randomValue3 = Math.floor(Math.random()*255);
                let randomColor = `rgb(${randomValue1},${randomValue2},${randomValue3})`;
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "100px";                
                document.getElementById('type1').style.backgroundColor= randomColor; 


            }
            
            function second()   {
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "0px";     
                document.getElementById('type1').style.backgroundColor= 'rgb(239, 239, 239)';

            }
        </script>

<input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
                            onmouseover= 'first()' onmouseout= 'second()';' />

Upvotes: 1

Related Questions