Solved

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

Posted on 2008-10-03
13
427 Views
Last Modified: 2013-11-19
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
Comment
Question by:StevenJames
  • 8
  • 5
13 Comments
 
LVL 4

Author Comment

by:StevenJames
ID: 22634728
Printing this in the immediate window shows that document[x] is undefined.

?document[x]
undefined
0
 
LVL 82

Expert Comment

by:hielo
ID: 22635039
>>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
 
LVL 4

Author Comment

by:StevenJames
ID: 22635364
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
 
LVL 4

Author Comment

by:StevenJames
ID: 22635391
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
 
LVL 82

Expert Comment

by:hielo
ID: 22635570
function swapbutton(id){
      x=id.substring(0,id.length-1);
      document[x].src=eval(id+'.src');
}
0
 
LVL 4

Author Comment

by:StevenJames
ID: 22635704
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Expert Comment

by:hielo
ID: 22635844
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
 
LVL 4

Author Comment

by:StevenJames
ID: 22635958
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
 
LVL 82

Expert Comment

by:hielo
ID: 22636068
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
 
LVL 4

Author Comment

by:StevenJames
ID: 22638371
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
 
LVL 4

Accepted Solution

by:
StevenJames earned 0 total points
ID: 22638482
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
 
LVL 4

Author Comment

by:StevenJames
ID: 22638506
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
 
LVL 82

Expert Comment

by:hielo
ID: 22638696
>>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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now