Super simple javascript question asked by idiot

September 9, 2006 8:23 PM

Easypeasy javascript question: I want to have document.x.src, where x is a variable I'll be calling up at some stage in a page body. As it currently stands, the browser attempts to find the thing with name="x", but it's going to return an error because there aren't any things with name="x". How do I let it know that x is a variable, and to ask whether it would be so kind as to use the value of x instead of the letter x?
posted by nylon to Computers & Internet (8 answers total)

Concatenate 'document.' and x and '.src':

For instance:

alert('document.' + x + '.src');

Should give you the source of 'document.foo.src' if x is 'foo'.
posted by AmbroseChapel at 8:37 PM on September 9, 2006

document[x].src?
posted by Pinback at 8:44 PM on September 9, 2006

Or something like that:

var layer = document.getElementById(x);

layer.setAttribute('src', MyValue);

alert(layer.getAttribute('src'));
posted by McSly at 8:47 PM on September 9, 2006

Don't use document in front. That tells the browser that you're looking for objects off the document object, which invariably are other document objects.

If you just want a variable, simply declare the variable. You can put var in front of it if you like formality, though it's not strictly necessary.

var x="something";

That's it. If you actually intend x to be a document object, use the createElement method. For example:

var x = document.createElement('IMG');
x.src = "image.jpg";

Note: until you actually attach the element to something, it's just floating around in the javascript aether and you won't see it. To attach it, do something like this:

document.body.attachChild(x);

This will append the x object to the end of the document body. If you want it someplace else, do this:

(Assume you have a DIV with the id="something"):

document.getElementById('something').attachChild(x);

posted by Civil_Disobedient at 9:03 PM on September 9, 2006

I tried that, Pinback, but in the context I had it, it didn't work at first. Which pissed me off no end, as I really thought it should. Adding some fluff/introducing a tweak got it going just fine, though - dunno why, but all I care about now is that it works:

document[x].src = URL // failure (document[x] has no properties)

but

var xx = URL
document[x].src = xx // success

So, many thanks!

on preview: oh boy, C_D - thanks - I'm too tired to fully understand much of that, but it looks thorough and, most of all, proper. Much appreciated. I'll go through and work out what's going on when I'm less fatigued and bitter about having to do this in the first place.
posted by nylon at 9:35 PM on September 9, 2006

Glad I was near-right. I haven't played with javascript in a while, and when I have done that sort of thing I was referencing objects already created/prepared with javascript (i.e. stored as references, not values). Hence the slightly terse post with the following question mark ;-)

C_D : spot on, but I found it easier to grasp when presented as document.element.property - your example separates that into 2 by first creating the object 'x' as an image element, then manipulating its properties. It's also a reference inside the current document rather than an absolute reference inside the whole DOM - horses for courses on that, I guess.
posted by Pinback at 10:00 PM on September 9, 2006

document[x].src = URL // failure (document[x] has no properties)

but

var xx = URL
document[x].src = xx // success

How is x defined, in the first example? It sounds like you've defined it as a variable but not made it a property of the document object.

Variables which are not defined with var are global in JavaScript, but that does not make them properties of the document object (they are properties of the window object). There's a distinction, as Civil_Disobedient points out, between objects which exist in the DOM and those which don't; for example, you can do:

x = document.createElement('div');

...but you've got to append x to some element in the existing DOM before it will show up.
posted by IshmaelGraves at 11:59 PM on September 9, 2006

I'm too tired to fully understand much of that...

I'll try and make it a bit easier to understand, as I wasn't sure how much experience you had and didn't want to confuse you more than necessary. :)

In JavaScript, much like any other programming language, you have variables and functions. Variables are things, functions are actions you do to things. This is oversimplification, of course, because sometimes you can have a function that returns a new thing. For instance:

function multiply(x, y) {
  return x*y;
}

That function takes two variables—x and y—multiplies them together, and returns the result. You could then do something like this:

var x = 4;
var y = 10;
var z = multiply(4, 10);

z now equals 40. Simple enough.

Variables can be separated into two distinct categories: primitives and objects. A "primitive" variable is a very simple substitution: numbers (x=10, x=3.1415, etc.) characters (x="a", x="Hello!", etc.) An "object" on the other hand is like a suitcase full of primitives. For example, I might create a "Customer" object that contains a name, a phone number, an address, etc.

Customer = {
  name: "Joe Watson",
  phone: "[phone]",
  Address: {
    street: "100 Main St.",
    city: "New York",
    state: "NY",
    zip: "10010"
  }
}

Every programming language has its own little idiosyncracies in the manner that you actually code these things, but when you're exposed to a bunch of them you'll start to see patterns. They're all basically the same, you just have to follow the particular program's rules regarding syntax and structure.

If you look carefully, you'll see I made the "Address" a sub-object. It's perfectly acceptable to nest objects inside other objects.

Now let's say you want to actually get to that data. Programming languages use what's called dot notation to indicate sub-objects or sub-properties. To get the name of the Customer, you'd do this:

Customer.name

...whereas, to get their zip code, do this:

Customer.Address.zip

So that's the basics. Since Javascript is so heavily related to the browser, the most common object you're going to run across are DOM objects (Document Object Model—get it?). These are special objects that have additional functions attached to them. That's right... you can also attach functions to objects!

For example, most document elements have the function getElementById attached to them. That means that you can use dot-notation to access the function off of any element (just about). Remember I said you can have objects that contain sub-objects? That's what document elements do. Take this HTML example:

<div id="obj1">Here's a div.
  <span id="obj2">Here's a nested span</span>
</div>

There you have a SPAN nested inside a DIV. But they're both document elements. Which means you could do this:

var reference1 = document.getElementById('obj1');
var reference2 = reference1.getElementById('obj2');

In the first case, it looks for any element contained inside the document object that contains the id "obj1". In the second case, it looks for any element contained inside the DIV that contains an element called 'obj2'. Containers-inside-containers-inside-containers.

Getting back to your original question, there are lots of built-in functions that can be used with DOM objects. If you wanted to create a new DOM object, you'd do this:

var imgElement = document.createElement('IMG');

This creates a new image element object. Now, what's the difference between that and the following?

var divElement = document.createElement('DIV');

Well, the first declaration creates a specific kind of document element: an image object. The image object contains specific primitive values that other kinds of objects—a DIV, for instance—don't have. Like what? Like a SRC attribute. Regular DIV's don't have image sources, so this would be invalid:

divElement.src = "image.jpg";

...but this would be OK:

imgElement.src = "image.jpg";

That's because the DIV object doesn't have any built-in "src" variable (remember our Customer object?), while an IMG object does understand what we're talking about.

Anyway, that's the very, very basics. There are plenty of good online tutorials that will cover all these things in much more detail—one of the nice things about the internet is that it's a great source for finding materials about the internet. :)
posted by Civil_Disobedient at 4:32 AM on September 10, 2006