CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 10 of 10
  1. #1
    Join Date
    May 2010
    Posts
    14

    Question Javascript - Function not working

    Hey all,

    I'm starting to learn javascript, well at least i thought i was learning it . I created this script where you can move a square inside a box and thats all working and all. So i thought lets make a game from it and i added the function "game()". But whenever the statement becomes true nothing happens. I though i finally started figuring out how things work in javascript but i guess thats not true .

    PHP Code:
    <html>
    <
    head>
    <
    title>Super squareman</title>

    <
    style>

        
    #gamebox {
            
    margin:auto;
            
    border1px solid black;
            
    width:512px;
            
    height:512px;
            
    background-colorrgb(192,192,192);
        }
        
        
    #squareman {
            
    position:relative;
            
    top240px;
            
    left240px;
            
    width:32px;
            
    height:32px;
            
    background-color:#900;
            
    border1px solid black;
        }
        
    </
    style>

    <
    script language="javascript">

    //instance squareman
    var squareman;

    var 
    timer;

    var 
    squaremanTop 240;
    var 
    squaremanLeft 240;

    function 
    init()
        {
            
    squareman document.getElementById('squareman');
            
    document.onkeydown keyListener;
            
    game();
        }
        
    //key detection function
    function keyListener(e)
    {
        if(!
    e)
        {
            
    window.event;
        }
        if (
    e.keyCode==37 && squaremanLeft 0)
        {
        
    squaremanLeft -= 4;
        
    squareman.style.left squaremanLeft 'px';
        }
        if (
    e.keyCode==39 && squaremanLeft 480)
        {
        
    squaremanLeft += 4;
        
    squareman.style.left squaremanLeft 'px';
        }
        if (
    e.keyCode==38 && squaremanTop 0)
        {
        
    squaremanTop -= 4;
        
    squareman.style.top squaremanTop 'px';
        }
        if (
    e.keyCode==40 && squaremanTop 480)
        {
        
    squaremanTop += 4;
        
    squareman.style.top squaremanTop 'px';
        }
    }    

    function 
    game()
    {
        if (
    squaremanTop 350)
        {
        
    gamebox.style.backgroundColor 'rgb(128,0,0)';
        
    squareman.style.backgroundColor 'rgb(0,128,0)';
        }
    }
        
    </
    script>    
        
    </
    head>

    <
    body onload="init()">

    <
    div id="gamebox">

        <
    div id="squareman">  
        </
    div>

    </
    div>


    </
    body>
    </
    html
    Last edited by HanneSThEGreaT; May 24th, 2010 at 08:03 AM.

  2. #2
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Javascript - Function not working

    You are calling the game function only one time, and that is when the page loads, so in fact, that causes nothing to happen. You have to call your game function from the press of either the up / down keys. If I do this :

    PHP Code:
    function init()
    {
    squareman document.getElementById('squareman');
    document.onkeydown keyListener;
    //REMOVED game(); HERE
    }

    //key detection function
    function keyListener(e)
    {
    if(!
    e)
    {
    window.event;
    }
    if (
    e.keyCode==37 && squaremanLeft 0)
    {
    squaremanLeft -= 4;
    squareman.style.left squaremanLeft 'px';
    }
    if (
    e.keyCode==39 && squaremanLeft 480)
    {
    squaremanLeft += 4;
    squareman.style.left squaremanLeft 'px';
    }
    if (
    e.keyCode==38 && squaremanTop 0)
    {
    squaremanTop -= 4;
    squareman.style.top squaremanTop 'px';
    }
    if (
    e.keyCode==40 && squaremanTop 480)
    {
    squaremanTop += 4;
    squareman.style.top squaremanTop 'px';
    game(); //ADDED THE CALL TO game() HERE!
    }

    It does change colours when moving down

  3. #3
    Join Date
    May 2010
    Posts
    14

    Re: Javascript - Function not working

    Miraculously it doesn't . However i can only check it in firefox, i know i should get opera and safari but i really don't care that much about IE atm.

  4. #4
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Javascript - Function not working

    So you're saying it still doesn't work?

    Tested mine on IE 8.

  5. #5
    Join Date
    May 2010
    Posts
    14

    Re: Javascript - Function not working

    I just checked it with IE and opera and it does work. But it still does not work with firefox, and i'm using firefox to debug so i really want to know whats making it not work in firefox.

    I am currently searching the net for similar problems with javascript style.change in firefox, i have found some posts but i can't find a clear answer on how to fix mine and specifically whats causing firefox to not change my div.
    Last edited by menyo; May 26th, 2010 at 04:44 AM.

  6. #6
    Join Date
    May 2002
    Posts
    10,943

    Re: Javascript - Function not working

    You're going to need to make a couple of changes...

    1. Window event capturing for cross-browser support
    Code:
    if (window.document.addEventListener) {window.document.addEventListener("keydown", keyListener, false);}
    else {window.document.attachEvent("onkeydown", keyListener);}
    2. Repeat key for Firefox
    Unfortunately, as Firefox progressed, the developers thought it would be more secure to not pass repeating keystrokes for the keydown event. So, you're going to have to create a timer (setInterval) and check to see if the keyup event has occurred. If not, repeat your method.
    Last edited by PeejAvery; May 26th, 2010 at 12:21 PM.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  7. #7
    Join Date
    May 2010
    Posts
    14

    Re: Javascript - Function not working

    Hey PeejAvery,

    I don't get it, i am able to move the square around the gamebox using my arrow keys in firefox. That means the event capturing is working and the variable squaremanTop is being calculated each time right? So how can the keylistener be the problem?

    Anyway, i take it that the code you gave should replace "document.onkeydown = keyListener;" in my init() function. If i'm correct that code checks if the browser has a key listener and if not it makes one. I replaced the line with your code and it's still not working (the background color style change part that is).

    About the repeat key for firefox, does this mean i'm unable to hold down the key in FF? Well i can hold down the key and after a second or 2 it will repeat. Obviously this isn't the effect i want in the end but figured i fix this later on. Or am i totaly wrong about this and should this fix my problem with changing css styles?

    I just think it's weird that i am able to change top and left CSS offset in firefox (moving squareman inside the gamebox) but i am not able to change the background color using the same method with firefox.

  8. #8
    Join Date
    May 2002
    Posts
    10,943

    Re: Javascript - Function not working

    Quote Originally Posted by menyo View Post
    I don't get it, i am able to move the square around the gamebox using my arrow keys in firefox. That means the event capturing is working and the variable squaremanTop is being calculated each time right? So how can the keylistener be the problem?
    It's not "the problem," but it is a cross-browser compliance issue. Not all browsers use document.onkeydown.... For some, you have to attach the events. The code I showed is completely cross-browser compliant for the attaching of an event handler.

    Quote Originally Posted by menyo View Post
    Anyway, i take it that the code you gave should replace "document.onkeydown = keyListener;" in my init() function. If i'm correct that code checks if the browser has a key listener and if not it makes one. I replaced the line with your code and it's still not working (the background color style change part that is).
    Once again...it's not "the problem." However, the code should look like this...

    Code:
    function init() { 
      squareman = document.getElementById('squareman'); 
      if (window.document.addEventListener) {window.document.addEventListener("keydown", keyListener, false);}
      else {window.document.attachEvent("onkeydown", keyListener);}
    }
    Quote Originally Posted by menyo View Post
    About the repeat key for firefox, does this mean i'm unable to hold down the key in FF? Well i can hold down the key and after a second or 2 it will repeat. Obviously this isn't the effect i want in the end but figured i fix this later on. Or am i totaly wrong about this and should this fix my problem with changing css styles?
    In Firefox for Windows, it will repeat with the exact same delay as specified for the key delay. You can adjust that in control panel. However, Firefox for Mac OS X and Linux distributions do not support the key repeat. That is why I suggest using a timer. Plus, with a timer, you won't have the key delay but you can regulate it in milliseconds.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  9. #9
    Join Date
    May 2010
    Posts
    14

    Re: Javascript - Function not working

    I finally fixed my problem.

    I had to correctly reference the element ID like this.

    document.getElementById('gamebox').style.backgroundColor = 'rgb(128,0,0)';
    instead of:
    gamebox.style.backgroundColor = 'rgb(128,0,0)';
    But about the multi browser functionality for the keystrokes....

    If i use:
    document.onkeydown = keyListener;
    everything works in every browser. But if i use your code:
    if (window.document.addEventListener) {window.document.addEventListener("keydown", keyListener, false);}
    else {window.document.attachEvent("onkeydown", callkeydownhandler);}
    It's not working in IE, so whats so multifunctional about your code? Am i forgetting something?
    Last edited by menyo; May 29th, 2010 at 09:29 AM.

  10. #10
    Join Date
    Apr 2009
    Posts
    598

    Re: Javascript - Function not working

    There are various ways to retrieve the keyCode.
    For your keyListener function, have
    Code:
    function keyListener(e) 
     var keyCode = 
        document.layers ? e.which :
        document.all ? event.keyCode :
        document.getElementById ? e.keyCode : 0;
    if (keyCode==37 && squaremanLeft > 0)
    ...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured