Solved

Why doesnt my JavaScript code work in Firefox and Chrome but fine in IE?

Posted on 2011-09-02
14
406 Views
Last Modified: 2012-05-12
I have a small JavaScript function which allows a user to press the arrow keys on the keyboard to navigate a html form.  It works fine in IE but it doesnt work at all in Firefox and Chrome and I cant understand why?

Many thanks


function move(cell) {
      x = event.keyCode;

      if (x > 36 && x < 41) {
        var cell = document.getElementById(cell).name; var col = cell.substring(5, 6); var row = cell.substring(2, 4);
        var tab = cell.substring(0, 1);
        switch (x) {
          case 37:
            col = parseFloat(col) - 1;
            document.getElementById(tab + "r" + row + "c" + col).focus();
            break;
          case 38:
            row = parseFloat(row) - 1; 
            row = (row < 10) ? "0" + row : row;
            document.getElementById(tab + "r" + row + "c" + col).focus(); 
            break;
          case 39:
            col = parseFloat(col) + 1;
            document.getElementById(tab + "r" + row + "c" + col).focus();
            break;
          case 40:
            row = parseFloat(row) + 1;
            row = (row < 10) ? "0" + row : row;
            document.getElementById(tab + "r" + row + "c" + col).focus(); 
            break;
        }
      }

Open in new window

0
Comment
Question by:cjohnson300
  • 5
  • 3
  • 2
  • +3
14 Comments
 
LVL 4

Expert Comment

by:mohammad827
ID: 36472293
Normally if this function is called on some event, then that event has to go as in parameter to function. Check using "window.event"
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36472295
In each of your case statements, you are defining either col or row but not both, and you are using both as your id in your getElementById statement.

Could this be an issue?
0
 

Author Comment

by:cjohnson300
ID: 36472302
OmniUnlimited:  All I can say it works just as I intended in IE!
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36472304
Sorry, didn't see the entire top statement.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36472309
Stupid question, but you do have javascript enabled in both browsers?
0
 

Author Comment

by:cjohnson300
ID: 36472310
Omni: Definitely, all sites (including this one) work fine
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36472323
When you have this on the screen in Firefox, press Ctl-Shift-J to bring up the error console and Firefox will probably tell you why it's not working.  Chrome has a similar feature.
0
 

Author Comment

by:cjohnson300
ID: 36472344
DaveBaldwin:  Thanks for that, very useful.  I'm getting "event not defined" on the line on the second line?
0
 
LVL 4

Expert Comment

by:mohammad827
ID: 36472357
Did you try window.event?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 36472360
Look here: http://forums.asp.net/t/1190120.aspx  Firefox and IE don't always do things the same way.
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36472396
You need to check the keycode for  Netscape/Firefox/Opera like

if(window.event) // IE
{
  iKeyCode = objEvent.keyCode
}
else if(objEvent.which) // Netscape/Firefox/Opera
{
  iKeyCode = objEvent.which
}
 alert(iKeyCode);


Details are here http://forums.asp.net/t/1220574.aspx/1
0
 
LVL 29

Expert Comment

by:Badotz
ID: 36472661
How and where is function move(cell) invoked?

Traditionally, the function would be declared as
function move(e){...}

Open in new window

and the element that triggered the event and the event itself are teased out of the parameter "e" like this:
function resolve_event(e) {
    var result = { "source":null, "target":null };
    if (e) {
        result.source = e;
        
        if (result.source.target) { // FF
            result.target = result.source.target;
        }
        else { // IE7+
            result.target = result.source.srcElement;
        }
    }
    else {
        result.source = window.event; 
        result.target = result.source.srcElement;
    }
    if (result.target && result.target.nodeType === 3) { // defeat Safari bug
        result.target = result.target.parentNode;
    }
    return result;
}
//
function move(e) {
    var x = resolve_event(e); // Handle the event
    var who = x.target; // Event sink
    var ev = x.source; // Event object
    ...
    ...
}

Open in new window

0
 

Author Comment

by:cjohnson300
ID: 36472800
Brilliant, it now recognises that key press, many thanks all.

However, now it says:
document.getElementById(tab + "r" + row + "c" + col is null

could it be the double quotes?

0
 

Author Comment

by:cjohnson300
ID: 36472819
my mistake, i'd forgotten to give my form elements ids, i had just given them names

thanks to all who helped points on the way
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to reload page and grab querystring 2 22
html input 8 42
How  can  I extract  Id  from a  URL  using  Javascript? 12 29
JQuery Syntax... 4 33
Several part series to implement Internet Explorer 11 Enterprise Mode
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question