Results 1 to 14 of 14

Thread: [RESOLVED] Passing a variable as a parameter into getElementById()?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Resolved [RESOLVED] Passing a variable as a parameter into getElementById()?

    Is it possible to pass a variable as the parameter into a getElementById()? I've been trying to find answers on google and not having much luck. I've heard some say you can but with no examples.

    This is what I'm trying to do.

    Code:
        function showImage(file1) {
            var largeImage = document.getElementById(file1);
    
            largeImage.style.display = 'block';
            largeImage.style.width=500+"px";
            largeImage.style.height="auto";
    
            var url=largeImage.getAttribute('src');
            window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
        }
    Thanks,
    Blake

  2. #2
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: Passing a variable as a parameter into getElementById()?

    well, yes, that's the only way getElementById works... is if you pass it a parameter... it doesn't work if you don't... what it does need to be is a string... and it should be an id that exists in the html... otherwise it returns Nothing.


    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3

    Re: Passing a variable as a parameter into getElementById()?

    Hello..

    yes only one way to use getElmentById works.which is u use but if u pass it's parameters it is don't work it returns only when you pass id which is exist in html otherwise it returns nothing

    in short you can't pass variables as parameter into getElmentById ().
    < advertising removed by moderator >

  4. #4
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: Passing a variable as a parameter into getElementById()?

    Quote Originally Posted by Siddhi Patel View Post
    Hello..

    yes only one way to use getElmentById works.which is u use but if u pass it's parameters it is don't work it returns only when you pass id which is exist in html otherwise it returns nothing

    in short you can't pass variables as parameter into getElmentById ().
    That makes no sense... you HAVE to pass it a parameter... it can be a hard coded string, or a string variable... but you have to pass it a string parameter.
    To answer Blake's question directly - yes you can, as long as it is a string variable and it is a valid ID of an element.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  5. #5
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Passing a variable as a parameter into getElementById()?

    Think about how things work in VB. If a method has a parameter of type String then you need to pass a String as an argument, but that can be any String, e.g.
    vb.net Code:
    1. Dim x = SomeMethod("Some text")
    2.  
    3. Dim y = "Some other text"
    4.  
    5. Dim z = SomeMethod(y)
    I doubt that you'd find this confusing in VB, so why should it be in JavaScript?

  6. #6

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Passing a variable as a parameter into getElementById()?

    So, is my example correct? If it is, it's not working. I keep getting this error: "Uncaught SyntaxError: Unexpected end of input"
    Blake

  7. #7
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Passing a variable as a parameter into getElementById()?

    Quote Originally Posted by blakemckenna View Post
    So, is my example correct? If it is, it's not working. I keep getting this error: "Uncaught SyntaxError: Unexpected end of input"
    Where exactly does that happen? On the line that calls getElementById? If that line successfully returns an element then you're looking in the wrong place for a problem. You need to identify the actual problem before you can find a solution.

    If it is on that line, what's the value of file1 and have you confirmed that an element with that id actually exists?

  8. #8
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Passing a variable as a parameter into getElementById()?

    The issue is probably here:
    Code:
    window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
    That third argument is a literal string and yet you have included variable names in there as though they will be automatically replaced with values. That should be:
    Code:
    window.open(url, 'Image', 'width=' + largeImage.style.width + ',height=' + largeImage.style.height + ',resizable=1');
    Note that you were missing a dot too, so it wouldn't have worked even if they were replaced automatically.

    Note that JavaScript also supports a feature akin to .NET string interpolation but it's not supported in (at least some versions of) IE so you can't use it if you want that wide browser support.

  9. #9

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Passing a variable as a parameter into getElementById()?

    jmc,

    I've attached a screenshot from Chrome DevTools. Also, the entire javascript is below. The getImages() function works as far as loading all the images onto the page. It's only when I click on a thumbnail do I get the error in the screenshot.

    The showImage() function never executes because the alert statement never fires.

    Code:
    <script>
        function getImages(dirLocation) {
            var dir = dirLocation;
    
            var fileextension = "jpg";
            
            $.ajax({
                //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                url: dir,
    
                success: function(data) {
                    //This empty() statement clears the canvas so a new directory can be reloaded
                    $("#container1").empty();
    
                    //List all png file names in the page
                    $(data).find("a:contains(" + fileextension + ")").each(function() {
                        var pathName = this.href;
                        var strLen = pathName.lastIndexOf('/');
                        var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
                        var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;     
                        var fileName2 = fileName.split('.', 1);
                        
                        var div = "<div class='images'>" +
                            "<a href=''><img id='" + fileName2 + "' onclick='showImage('" + fileName2 + "')' src='" + newFileName + "' width='450' height='auto'>" +
                            "<div class='caption'></div></a></div>"
                        
                        alert(div);
                        
                        $("#container1").append($(div));
                    });
                }
            });
        }
        //
        //
        //
        function showImage(file1) {
            alert(document.getElementById(file1).value);
            
            var largeImage = document.getElementById(file1).value;
            largeImage.style.display = 'block';
            largeImage.style.width=700+"px";
            largeImage.style.height="auto";
            var url=largeImage.getAttribute('src');
            window.open(url,"_blank");
    //        window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
        }
    </script>
    Thanks,
    Attached Images Attached Images  
    Blake

  10. #10
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Passing a variable as a parameter into getElementById()?

    Did you actually look at the value of div? I don't see how it could be valid. You'd end up with something like this:
    Code:
    onclick='showImage('some text')'
    You can't have nested single quotes like that. That's probably the syntax error that's being referred to.

  11. #11

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Passing a variable as a parameter into getElementById()?

    Here is what the variable "div" contains:

    Code:
    <div class='images'>
        <a href=''>
    	<img id='IMG_0040_touched' onclick='showImage('IMG_0040_touched')' 
    	     src='http://localhost/BM/Portfolio/Landscapes/IMG_0040_touched.jpg' width='450' height='auto'>
    	<div class='caption'></div>
       </a>
    </div>
    I'm assuming you mean the code in red. I'm trying to build this statement dynamically using single quotes and double quotes. If it is incorrect, I'm just not sure how to string that section of code together.
    Blake

  12. #12
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Passing a variable as a parameter into getElementById()?

    One option that should work:
    Code:
    var onclick = 'showImage("' + fileName2 + '")';
    var div = "<div class='images'>" +
              "<a href=''><img id='" + fileName2 + "' onclick='" + onclick + "' src='" + newFileName + "' width='450' height='auto'>" +
              "<div class='caption'></div></a></div>"
    That way, you should end up with this:
    Code:
    onclick='showImage("IMG_0040_touched")'
    and that will be valid. You might also look into the string interpolation option I mentioned, if it will work for all the browsers you need to support. I can't recall the name used to refer to it in JavaScript.

  13. #13

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Passing a variable as a parameter into getElementById()?

    Dude....that worked! This has been driving me crazy! Thank you so much.
    Blake

  14. #14
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: [RESOLVED] Passing a variable as a parameter into getElementById()?

    We all encounter issues with multiple levels of quotes in JavaScript at some point. Welcome to the club.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width