Newbie Question: funcion containing this.id not reading

Discussion in 'Javascript' started by Jeremy, Jul 7, 2004.

  1. Jeremy

    Jeremy Guest

    Perhaps someone can help me... This is actually the source of an asp
    page but contains all the info for this particular function. I am
    trying to allow someone to click a photo and allow a pseudo-window (to
    avoid pop-up blocking) using css and table. When I try to call the id
    in the function, it comes up undefined. Anyone know why??

    Thanks in advance!

    Jeremy

    PS: The code -

    <head>
    <script language="JavaScript">
    <!--

    function Pic_Do() {
    win.className='winShow'
    }
    function Pic_Get() {
    var ident=0;
    var src = new Array();
    var ident = this.id;
    src[0] ='../images/photos/7.jpg'
    src[1] ='../images/photos/8.jpg'
    src[2] ='../images/photos/9.jpg'
    src[3] ='../images/photos/10.jpg'
    src[4] ='../images/photos/11.jpg'
    src[5] ='../images/photos/12.jpg'
    src[6] ='../images/photos/13.jpg'
    src[7] ='../images/photos/14.jpg'
    src[8] ='../images/photos/15.jpg'
    src[9] ='../images/photos/16.jpg'

    document.images.SelPic.src = src[ident];
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    ..pics {
    position: absolute;
    left: 130px;
    top: 115px;
    font-size: small;
    }
    ..WinHide {
    visibility: hidden;
    }
    ..WinShow {
    background-color: #000033;
    position: absolute;
    visibility: visible;
    height: 300px;
    width: 500px;
    left: 100px;
    top: 120px;
    }
    -->
    </style>
    </head>
    <BODY>



    <FORM id="pic" name="picform" class="pics">
    <table>
    <tr>
    <td id=0 onClick="Pic_Do(), Pic_Get()"><img src
    ='../images/photos/7.jpg' width='100' height='100'> &nbsp;<br>
    </td>
    <td id=1 onClick="Pic_Do(), Pic_Get()"><img src
    ='../images/photos/8.jpg' width='100' height='100'> &nbsp;<br>
    </td>
    <td id=2 onClick="Pic_Do(), Pic_Get()"><img src
    ='../images/photos/9.jpg' width='100' height='100'> &nbsp;<br>
    </td>
    <td id=3 onClick="Pic_Do(), Pic_Get()"><img src
    ='../images/photos/10.jpg' width='100' height='100'> &nbsp;<br>
    </td>
    </tr>
    </table>
    </FORM>

    <form id="win" name="winForm" class="WinHide">

    <img name="SelPic">
    <input type="Button" OnClick="win.className='winHide'"
    value="Close Window">
    </form>
    </BODY>
    </HTML>
    Jeremy, Jul 7, 2004
    #1
    1. Advertising

  2. Jeremy

    Grant Wagner Guest

    Jeremy wrote:

    > Perhaps someone can help me... This is actually the source of an asp
    > page but contains all the info for this particular function. I am
    > trying to allow someone to click a photo and allow a pseudo-window (to
    > avoid pop-up blocking) using css and table. When I try to call the id
    > in the function, it comes up undefined. Anyone know why??
    >
    > Thanks in advance!
    >
    > Jeremy
    >
    > PS: The code -
    >
    > <head>
    > <script language="JavaScript">


    <script type="text/javascript">

    > <!--


    Not required. Omit.

    > function Pic_Do() {
    > win.className='winShow'


    IE is one of the few browsers that will recognize "win" as a global
    reference to your form. Use document.forms['winForm'].className ...

    > }
    > function Pic_Get() {
    > var ident=0;
    > var src = new Array();
    > var ident = this.id;


    In the context of this function, "this" is the function itself, not the
    table cell which triggered the event.

    Try:

    function Pic_Get(cell) {
    var ident = cell.id;


    > src[0] ='../images/photos/7.jpg'
    > src[1] ='../images/photos/8.jpg'
    > src[2] ='../images/photos/9.jpg'
    > src[3] ='../images/photos/10.jpg'
    > src[4] ='../images/photos/11.jpg'
    > src[5] ='../images/photos/12.jpg'
    > src[6] ='../images/photos/13.jpg'
    > src[7] ='../images/photos/14.jpg'
    > src[8] ='../images/photos/15.jpg'
    > src[9] ='../images/photos/16.jpg'


    Why not define this once outside of your function, rather then everytime
    it is called?

    > document.images.SelPic.src = src[ident];


    document.images['SelPic'].src is easier to read, and it's obvious you
    aren't attempting to use a variable named SelPic.

    > }
    > //-->


    Not required. Omit.

    > </script>
    > <style type="text/css">
    > <!--
    > .pics {
    > position: absolute;
    > left: 130px;
    > top: 115px;
    > font-size: small;
    > }
    > .WinHide {
    > visibility: hidden;
    > }
    > .WinShow {
    > background-color: #000033;
    > position: absolute;
    > visibility: visible;
    > height: 300px;
    > width: 500px;
    > left: 100px;
    > top: 120px;
    > }
    > -->
    > </style>
    > </head>
    > <BODY>
    >
    > <FORM id="pic" name="picform" class="pics">
    > <table>
    > <tr>
    > <td id=0 onClick="Pic_Do(), Pic_Get()"><img src


    onclick="Pic_Do();Pic_Get(this);"

    Note, a semi-colon separates Javascript statements, not a comma.
    Note, Pic_Get() now receives a reference to the table cell that triggered
    the event, which means the ID can not be retrieved (as shown in the code
    earlier).

    Repeat for other table cells.

    > </tr>
    > </table>
    > </FORM>
    >
    > <form id="win" name="winForm" class="WinHide">
    >
    > <img name="SelPic">
    > <input type="Button" OnClick="win.className='winHide'"


    onclick="this.form.className='winHide';"

    > value="Close Window">
    > </form>
    > </BODY>
    > </HTML>


    Untested.

    --
    Grant Wagner <>

    * Client-side Javascript and Netscape 4 DOM Reference available at:
    *
    http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

    * Internet Explorer DOM Reference available at:
    *
    http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

    * Netscape 7 DOM Reference available at:
    * http://www.mozilla.org/docs/dom/domref
    * Tips for upgrading Javascript for Netscape 7 / Mozilla
    * http://www.mozilla.org/docs/web-developer/upgrade_2.html

    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Jul 7, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    372
    Alvin Bruney - ASP.NET MVP
    Sep 28, 2005
  2. Robert Wierschke
    Replies:
    3
    Views:
    11,058
    Louise56
    Aug 3, 2004
  3. Kay
    Replies:
    1
    Views:
    381
    John Harrison
    Sep 3, 2004
  4. Pete C
    Replies:
    8
    Views:
    376
    Jay Nabonne
    Oct 9, 2005
  5. Solang
    Replies:
    2
    Views:
    625
    Solang
    Sep 24, 2009
Loading...

Share This Page