CODEWITHSUNDEEP
javascript
Sameeksha Kumari
Sameeksha Kumari

Reputation: 1264

Unable to fetch the div style left value....

I have just started learning javascript and I was trying to move a div element using javascript. I was using the left and top property of style to move the div. The code is below. 

html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script>
window.onload = function() {

    divObj = document.getElementById('divObj');

    window.onkeydown=function(e) {
        var keycode;
        keycode = e.keyCode;
        speed = 1;
        if(keycode == 37) {        
           divObj.style.left = (parseInt(divObj.style.left) - speed) + "px"; }
        else if(keycode == 38)
           divObj.style.top = (parseInt(divObj.style.top) - speed) + "px";
        else if(keycode == 39)
           divObj.style.left = (parseInt(divObj.style.left) + speed) + "px";  
        else if(keycode == 40)
           divObj.style.top = (parseInt(divObj.style.top) + speed) - "px";    

        }
    }
</script>

<style>
div.div1 { width : 200px;
          height :50px;
          background-color : #333;
          position:absolute;
          left:0px;
          top:0px;
        }
</style>


</head>

<body>
<div id = "divObj" class = "div1"></div>

</body>
</html>

The problem is that the 'divObj.style.left' is not returning any value and so the div cannot be moved using the up and down key.

If anyone knows how to get the values of style left property of the div, please let me know.

Upvotes: 1

Views: 319

Answers (3)

Pumpkinpro
Pumpkinpro

Reputation: 847

I made it this way

divObj = document.getElementById('divObj');

 window.onkeydown=function(e) {
        var keycode;
        var lll = divObj.offsetLeft
        var rrr = divObj.offsetTop
        keycode = e.keyCode;
        speed = 1;
        if(keycode == 37) {        

           divObj.style.left = lll - speed+"px";}

        else if(keycode == 38){
          divObj.style.top = rrr - speed+"px";}
        else if(keycode == 39){
           divObj.style.left = lll + speed+"px";}
        else if(keycode == 40){
          divObj.style.top = rrr + speed+"px";}
 }

jsfiddle

Upvotes: 1

yogi
yogi

Reputation: 19619

Try this

window.onload = function () {
divObj = document.getElementById('divObj');

window.onkeydown = function (e) {
   var keycode;
   keycode = e.keyCode;
   speed = 1;
   if (keycode == 37)
      divObj.style.left = 
           ((divObj.style.left == "" ? "0" : parseInt(divObj.style.left)) + speed) + "px";
   else if (keycode == 38)
       divObj.style.top = 
           ((divObj.style.top == "" ? "0" : parseInt(divObj.style.top)) + speed) + "px";
   else if (keycode == 39)
        divObj.style.left = (
           (divObj.style.left == "" ? "0" : parseInt(divObj.style.left)) + speed) + "px";
   else if (keycode == 40)
        divObj.style.top = 
            ((divObj.style.top == "" ? "0" : parseInt(divObj.style.top)) + speed) + "px";
    }
}

Upvotes: 1

user3956566
user3956566

Reputation:

You need individual braces for all your else if statements

if(keycode == 37) {        
           divObj.style.left = (parseInt(divObj.style.left) - speed) + "px"; }
        else if(keycode == 38){
           divObj.style.top = (parseInt(divObj.style.top) - speed) + "px";}
        else if(keycode == 39){
           divObj.style.left = (parseInt(divObj.style.left) + speed) + "px"; } 
        else if(keycode == 40){
           divObj.style.top = (parseInt(divObj.style.top) + speed) - "px";}

Upvotes: 3

Related Questions