Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HONWORK #3</title>
    <style>
        div {
            }
        input
            {
            width: 35px;
            height: 35px;
            }
    </style>
</head>
<body>
   <table>
    <tr>
        <td><input type="button" value="↖" id="BUTTONtopleft"></td>
        <td><input type="button" value="↑" id="BUTTONup"></td>
        <td><input type="button" value="↗" id="BUTTONtopright"></td>
    </tr>
    <tr>
        <td><input type="button" value="←" id="BUTTONleft"></td>
        <td></td>
        <td><input type="button" value="→" id="BUTTONright"></td>
    </tr>
    <tr>
        <td><input type="button" value="↙" id="BUTTONdownleft"></td>
        <td><input type="button" value="↓" id="BUTTONdown"></td>
        <td><input type="button" value="↘" id="BUTTONdownright"></td>
    </tr>
   </table>

<!--    <div id="box"></div>-->


    <img src="upORright.jpg" id="THEMAN">


    <script>


    var x = 0;
    var y = 0;
    document.getElementById("BUTTONright").onclick=function(){
                                                         x+=5; //x=x+5;
                                                         document.getElementById('THEMAN').style.marginLeft=x+'px';
                                                         }
    document.getElementById("BUTTONleft").onclick=function(){
                                                         x-=5; //x=x+5;
                                                         document.getElementById('THEMAN').style.marginLeft=x+'px'; // <== string було Х, стало Хpx (рядковий)
                                                         this.
                                                         }

    document.getElementById("BUTTONdown").onclick=function(){
                                                         y+=5; //x=x+5;
                                                         document.getElementById('THEMAN').style.marginTop=y+'px'; //
                                                         }
    document.getElementById("BUTTONup").onclick=function(){
                                                         y-=5; //x=x+5;
                                                         document.getElementById('THEMAN').style.marginTop=y+'px';
                                                         }

//        document.getElementById('box1').onmouseover=function()
//                                                               {
//                                                               document.body.style.backgroundColor=this.style.backgroundColor;
//                                                               }
//

//        document.getElementById('box').onclick=function()
//                                                        {
//                                                        this.style.backgroundColor='Yellow';
//                                                        }

//        document.getElementById('box').style.backgroundColor='blue'

//        //типи даних
//        var x = 11; //number -  числове значення, константа
//        var y = 'Hellow World'; //srting - строковий тип даних
//        var h = true; //boolean (true\false) - булевий
//        var z = undefined //пуста змінна без заданого значення
//        var j = null //обєктний тип, нуль
//
//        //alert('Hello World');
//        //alert(y);
//        //y='Papa World';
//        //alert(y);

//onmouseover onmouseout
    </script>

</body>
</html>