Solved

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

Posted on 2008-10-03
13
429 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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
 
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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

821 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