#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep Power
    0

    Problem with element.style.left


    Hello,

    I am trying t do some tests of javascript to make in practice what i did learn from some tutorials..

    So I suggest to you to examin this code :

    Code:
    <html> <head> <title>Test Javascript</title> <style> #bonjour{ position : absolute; } </style> </head> <body> <label id="bonjour" style="{position : absolute;}">Bonjour ca va?</label> <script> var bonjour = document.getELementById('bonjour'); document.addEventListener('keyup',function(e){ if(e.keyCode == 37){ bonjour.style.left = '200px';} },false); </script> </body> </html>
    So what i want to do is so simple . I just want to move my label in the right when I click on the button right of the keyword..But it doesn't work..
    Could you verify please where I made the error in my code ??


    Thanks ,
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    253
    Rep Power
    87
    Hi there kakolaukiom,

    and a warm welcome to these forums.

    In your code you have...
    Code:
    
    var bonjour = document.getELementById('bonjour'); 
    ...it should, of course, be...
    Code:
    
    var bonjour = document.getElementById('bonjour'); 
    coothead
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    Please use this code


    <html>
    <head>
    <title>Test Javascript</title>
    <style> #bonjour{ position : absolute; }
    </style>
    </head>
    <body>
    <label id="bonjour" style="{position : absolute;}">Bonjour ca va?</label>
    <script>
    var bonjour = document.getElementById('bonjour');
    document.addEventListener('keyup',function(e)
    {
    if(e.keyCode == 39)
    {
    bonjour.style.left = '200px';
    }
    },false);
    </script>
    </body>
    </html>

    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo