Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 437
  • Last Modified:

'document[...]' is null or not an object

Original question
==================================
Hi. I'm getting an error swapping buttons. The error is:
"A Runtime Error has occurred.
Line: 11
Error: 'document[...]' is null or not an object

<html>
<head>
<script language='JavaScript'>
<!--
function xppr(im){
      var i=new Image();
      i.src='images/bt'+im;return i;
}
function swapbutton(id){
      x=id.substring(0,id.length-1);
      document[x].src=eval(id+'.src');
      if(id.indexOf('e')!=-1)document[x+'e'].src=eval(id+'e.src');    
// ERROR IS HERE ON document[x+'e'].src=eval(id+'e.src');

}
accessn=xppr('access_0.gif');
accesso=xppr('access_1.gif');
accessc=xppr('access_2.gif');
 //-->
</script>

<title>test</title>
</head>
<body>
<a href="access.asp" onMouseOver='swapbutton("accesso");'onMouseOut='swapbutton("accessn");'onMouseDown='swapbutton("accessc");'><img src="images/btaccess_0.gif" name=access width="100" height="21" border=0 alt ="access">
</body>
</html>

Any ideas on how to solve this?
==================================
Solution was to remove the "e" from
if(id.indexOf('e')!=-1)document[x+'e'].src=eval(id+'e.src');
since it doesn't exist.

BUT!!!!
I've been using this since last year, but now when I put the button in an input tag like this:
<input onMouseOver='swapbutton("logino");' onMouseOut='swapbutton("loginn");' onMouseDown='swapbutton("loginc");' src="btlogin_0.gif" type="image" border="0" value="Login" id="submit1" name="Login">
it dies.

Debuging the script (MS) tells me that document[x] is not an object. (x="Login")

Is the Input tag not accessible from the Document object?

Thanks.

Anyone?
0
StevenJames
Asked:
StevenJames
  • 8
  • 5
1 Solution
 
StevenJamesAuthor Commented:
Printing this in the immediate window shows that document[x] is undefined.

?document[x]
undefined
0
 
hieloCommented:
>>BUT!!!! I've been using this since last year...
Yes, but on the working code you are passing "loginX", where x is some letter that is NOT 'e'. So, on the working code, when you do:
if(id.indexOf('e')!=-1)

will always be false since "loginX" does NOT CONTAIN an 'e'. By contrast, on the failing code you are passing "accessX". Regardless of what you provide as the value of "X", the if condition will always evaluate to true because "access" does contain an "e", so it will attempt to execute the if-clause, but there is no such element, hence the failure - ex: when you pass:

onMouseOver='swapbutton("accesso");

that if will evaluate to true, and next statement is doing:
document['accessoe']....

which does not exist. So, on the working code, that if clause never executed (that's why you never saw the error) - basically it was useless. That's why if you get rid of the if clause, it should work.
0
 
StevenJamesAuthor Commented:
This is what I'm using
function swapbutton(id){
  x=id.substring(0,id.length-1);
  document.forms.form1.x.src=eval(id+'.src');
  if(id.indexOf('')!=-1)document[x+''].src=eval(id+'.src');
}
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
StevenJamesAuthor Commented:
This is what I'm using So far and still not working.

Even if I ?document.forms.form1.Login
I get: Null
(doesn't see it)
0
 
hieloCommented:
function swapbutton(id){
      x=id.substring(0,id.length-1);
      document[x].src=eval(id+'.src');
}
0
 
StevenJamesAuthor Commented:
document[x] is

'document[...]' is null or not an object

In the immediate window I get
?document[x]
undefined
?x
"login"
?document[x].value
'document[...].value' is null or not an object
?document[x].name
'document[...].name' is null or not an object
0
 
hieloCommented:
below is the exact code I tried and is NOT producing any errors. I included an alert so you can see the changing image src value:
<html>
<head>
<script language='JavaScript'>
<!--
function xppr(im){
      var i=new Image();
      i.src='images/bt'+im;return i;
}
function swapbutton(id){
      x=id.substring(0,id.length-1);
      document[x].src=eval(id+'.src');
alert( "new image used: "+document[x].src);
}
accessn=xppr('access_0.gif');
accesso=xppr('access_1.gif');
accessc=xppr('access_2.gif');
 //-->
</script>
 
<title>test</title>
</head>
<body>
<a href="access.asp" onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");'><img src="images/btaccess_0.gif" name='access' width="100" height="21" border=0 alt="access">
</body>
</html>

Open in new window

0
 
StevenJamesAuthor Commented:
Cool. Now notice that you are doing what has been working for me for a year already.

Now try to do it with an input! (which is what I'm trying to do).
Switch
<a href="access.asp" onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");'><img src="images/btaccess_0.gif" name='access' width="100" height="21" border=0 alt="access">

With
<input onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");' src="btaccess_0.gif" type="image" border="0" value="Login" id="submit1" name="Login">
You'll see it die at
document[x].src=eval(id+'.src');
0
 
hieloCommented:
Nope. I still don't see any runtime error. If you are not seeing the image(s), then perhaps the path is not right, but I don't get any runtime error
<html>
<head>
<script language='JavaScript'>
<!--
function xppr(im){
      var i=new Image();
      i.src='images/bt'+im;return i;
}
function swapbutton(id){
      x=id.substring(0,id.length-1);
      document[x].src=eval(id+'.src');
alert( "new image used: "+document[x].src);
}
accessn=xppr('access_0.gif');
accesso=xppr('access_1.gif');
accessc=xppr('access_2.gif');
 //-->
</script>
 
<title>test</title>
</head>
<body>
<!-- <a href="access.asp" onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");'> -->
<input onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");' src="btaccess_0.gif" type="image" border="0" value="Login" id="submit1" name="Login">
<img src="images/btaccess_0.gif" name='access' width="100" height="21" border=0 alt="access">
</body>
</html>

Open in new window

0
 
StevenJamesAuthor Commented:
try the above but only keep the
<input onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");' src="btaccess_0.gif" type="image" border="0" value="Login" id="submit1" name="Login">
line.  Most importantly, get rid of
<img src="images/btaccess_0.gif" name='access' width="100" height="21" border=0 alt="access">

I want the button to swap, not another image.
0
 
StevenJamesAuthor Commented:
OK.
I found something that works.
It's here and it works. Keep in mind that it's not pure html4. It involves creating the attributes (not as bad as it sounds.)
http://www.howtocreate.co.uk/jslibs/script-imgroll
 
 
 
0
 
StevenJamesAuthor Commented:
Just in case that link dies.
Note: The INPUT example is the last one.
---------------------------------------------------
/****************************************************************************************
          Script to automate image rollovers and click effects, using just HTML
                  v1.1 written by Mark Wilton-Jones, 30-31/12/2003
                     updated 29/04/2004 for Konqeror XHTML fix
*****************************************************************************************

To use this, insert the following HTML just before the </body> tag:
<script type="text/javascript" language="javascript1.2" src="PATH TO SCRIPT/imgRoll.js"></script>
(code's at the bottom here)

To apply a hover or click effect to any image or image input, simply add the desired extra
attributes to the image or input definition. The attribute names must ALWAYS be written in
lower case:
      hoversrc="hover.gif"     produces a hover/rollover effect
      activesrc="hover.gif"    produces a click/active effect
The syntax of these attributes is identical to the src attribute.

      Regular image:
            <img src="root.gif" height="50" width="50" alt="" border="0">
      Hover:
            <img src="root.gif" hoversrc="hover.gif" height="50" width="50" alt="" border="0">
      Click:
            <img src="root.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">
      Hover and click:
            <img src="root.gif" hoversrc="hover.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">
      Hover and click on an image input:
            <input type="image" src="root.gif" hoversrc="hover.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">

Warnings:

      This script attaches the following event handlers to the images; mouseover, mouseout, mousedown, mouseup
      These will override any that you specify
      They may also affect any mousedown and mouseup event detection on parent elements

      The HTML will not validadate as valid core HTML 4 (but adding custom attributes is a valid practice)
_______________________________________________________________________________________*/

var MWJ_img_cache = new Object();
for( var i = 0; i < 2; i++ ) {
      var ar = i ? ( document.getElementsByTagName ? document.getElementsByTagName('input') : ( document.all ? document.all.tags('INPUT') : [] ) ) : document.images;
      for( var x = 0; ar[x]; x++ ) {
            var im = ar[x];
            if( im.getAttribute ) { im.hoversrc = im.getAttribute('hoversrc'); im.activesrc = im.getAttribute('activesrc'); }
            if( im.hoversrc || im.activesrc ) {
                  if( !MWJ_img_cache[im.src] ) { MWJ_img_cache[im.src] = new Image(); MWJ_img_cache[im.src].src = im.src; }
                  im.rootsrc = im.src;
                  im.onmouseout = function () { this.src = this.rootsrc; };
            }
            if( im.hoversrc ) {
                  if( !MWJ_img_cache[im.hoversrc] ) { MWJ_img_cache[im.hoversrc] = new Image(); MWJ_img_cache[im.hoversrc].src = im.hoversrc; }
                  im.onmouseover = function () { this.src = this.hoversrc; };
            }
            if( im.activesrc ) {
                  if( !MWJ_img_cache[im.activesrc] ) { MWJ_img_cache[im.activesrc] = new Image(); MWJ_img_cache[im.activesrc].src = im.activesrc; }
                  im.onmousedown = function (e) {
                        e = e ? e : window.event;
                        if( e.button > 1 || e.which > 1 ) { return; }
                        this.src = this.activesrc;
                  };
                  im.onmouseup = function (e) {
                        e = e ? e : window.event;
                        if( e.button > 1 || e.which > 1 ) { return; }
                        this.src = this.hoversrc ? this.hoversrc : this.rootsrc;
                  };
            }
      }
}
0
 
hieloCommented:
>>Most importantly, get rid of ...I want the button to swap, not another image.
Couldn't you say that from the very start?

This is all you need:
<html>
<head>
<script language='JavaScript'>
<!--
function xppr(im){
      var i=new Image();
      i.src='images/bt'+im;return i;
}
function swapbutton(o,id){
      x=id.substring(0,id.length-1);
      o.src=eval(id+'.src');
}
accessn=xppr('access_0.gif');
accesso=xppr('access_1.gif');
accessc=xppr('access_2.gif');
 //-->
</script>
 
<title>test</title>
</head>
<body>
<!-- <a href="access.asp" onMouseOver='swapbutton("accesso");' onMouseOut='swapbutton("accessn");' onMouseDown='swapbutton("accessc");'> -->
<input onMouseOver='swapbutton(this,"accesso");' onMouseOut='swapbutton(this,"accessn");' onMouseDown='swapbutton(this,"accessc");' src="btaccess_0.gif" type="image" border="0" value="Login" id="submit1" name="Login">
<!-- <img src="images/btaccess_0.gif" name='access' width="100" height="21" border=0 alt="access"> -->
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now