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

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

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 ().

Quote:

---

Originally Posted by Siddhi Patel

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

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:

Dim x = SomeMethod("Some text")
 
Dim y = "Some other text"
 
Dim z = SomeMethod(y)

I doubt that you'd find this confusing in VB, so why should it be in JavaScript?

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

Quote:

---

Originally Posted by blakemckenna

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?

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.

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,

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.

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.

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.

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

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