Can you use variables in getElementsByClassName("")[]? And how?

Question

I'm trying to to make the class number selector on document.getElementsByClassName("photo")[2].setAttribute("id", "current_page");, i.e. the 2 be a variable.

Here's my real code: HTML: onclick="test(this)"

And JS:

function test(y) {
 var x = y;
 document.getElementsByClassName("photo")[2].setAttribute("id", "current_page");
}

So how can I make the class selector (on example it is [2]), a variable?

Thanks so much!

You can do `getElementsByClassName("photo")[y].setAttribute` — Rajesh, Nov 14 '16 at 07:01
You mean you want the second, and later variable, ".photo" element right? — Maarten Bicknese, Nov 14 '16 at 07:02
@PatrickEvans if I do that i get: `TypeError: undefined is not an object (evaluating 'document.getElementsByClassName("photo")[y].setAttribute')` — Emmet Arries, Nov 14 '16 at 07:03
@MaartenBicknese Patrick was on to what I want to do, replace the `2`, but it doesn't work. — Emmet Arries, Nov 14 '16 at 07:04
can you post html also? i don't understand which one you have to click? — prasanth, Nov 14 '16 at 07:04
@prasad Well, it's php, let me work on it. but for the mean time, all the code is on http://emmetstudios.com/landscape/ , just open up the web inspector. — Emmet Arries, Nov 14 '16 at 07:06
Objective, problem and question are not very clear here. A little more effort in writing up a properly detailed problem statement and question would help us help you — charlietfl, Nov 14 '16 at 07:06
Because you havent validated that your varible contans a value that is useable, ie the value isnt greater or equal to the length of the collection — Patrick Evans, Nov 14 '16 at 07:06
This is due `y` not being a number. It would be wise to check if the element exists before assignment of a new id. And retrieve the index of the clicked element. — Maarten Bicknese, Nov 14 '16 at 07:06
if add the attribute `id` at the same element. use like that .`this.setAttribute('id','something')`. In your link all the `photo ` class are same `test(this)`.Then why use with `()[2]`? — prasanth, Nov 14 '16 at 07:09
EVERYONE: I'm going to be trying out your solutions, hold tight. — Emmet Arries, Nov 14 '16 at 07:13
@prasad Yes it worked! Do you want to post your comment as an answer? — Emmet Arries, Nov 14 '16 at 07:15
i cant understand what you're trying to to do here. i'm guessing that what you mean is this? `y.setAttribute("id", "current_page")` — Semi-Friends, Nov 14 '16 at 07:16
This would have been so much simpler had you provided a [mcve] — charlietfl, Nov 14 '16 at 07:16
@charlietfl & EVERYONE: I'm sorry this was confusing, I don't really know my JS, and I didn't know what the `2` in the `[]` meant (the index, as I now know), and I was trying my best to explain it, I'm sorry that it didn't make sense and I thank you all for you support and for trying! ~ Jeff — Emmet Arries, Nov 14 '16 at 07:20

score 2 · Answer 1 · edited Nov 14 '16 at 07:12

Not sure I understand your requirement from your example, but you can use a variable for the class name:

var className = 'photo';    
var elements = document.getElementsByClassName(className);

Although from your example you seem to want the third element returned by getElementsByClassName? To select the nth element, again using a variable, you can do:

var elementIndex = 2;
var element = document.getElementsByClassName(className)[elementIndex];

Hope I've understood, but add a comment if this isn't what you're trying to get.

score 1 · Accepted Answer · answered Nov 14 '16 at 07:16

1

if add the attribute id at the same element. use like that

function test(that) {
 
 that.setAttribute("id", "current_page");
}

answered Nov 14 '16 at 07:16

prasanth

22,145
4
29
53

Can you use variables in getElementsByClassName("")[]? And how?

2 Answers2