Solved

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

Posted on 2011-09-02
14
411 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Chrome not remembering website passwords 7 78
Add - in a loop to first and last element. 6 57
Multiple of Image Swaps 5 40
Drag & Drop Error 5 24
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

739 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