How to get the element's ID that continually changes?

Question

So I have an html file where an 'Add' button creates field box labeled

<a id="document_create:nxl_item:nxw_referenceHeaderList:0:nxw...." class="button smallButton listWidgetActionAdd" onclick="return ... </a>

If I keep clicking the 'Add' button, the id name continually changes every time where the 0 is. It can be:

document_create:nxl_item:nxw_referenceHeaderList:0:nxw....
document_create:nxl_item:nxw_referenceHeaderList:1:nxw....
document_create:nxl_item:nxw_referenceHeaderList:2:nxw....
document_create:nxl_item:nxw_referenceHeaderList:2:nxw....
document_create:nxl_item:nxw_referenceHeaderList:3:nxw....

Is there a way that I can extract the ID name without having to type it in manually? Like a loop or a function that can extract the ID from a class or something?

Any help would be appreciated! Thanks!

It would be a lot easier to help you if you showed some HTML context. — T.J. Crowder, Jun 16 '15 at 12:33
Is the format of the ids fixed? Or do you must use id to identified elements? — Eason.Luo, Jun 16 '15 at 12:42
@Eason.Luo The ids are not fixed. So every time I click the add button, the numbers are the only ones that change. — user3851283, Jun 16 '15 at 13:06

T.J. Crowder · Accepted Answer · 2015-06-16T13:14:53.377

It would be a lot easier to help you if you showed some HTML context, but if new ones are being added after previous ones, you can find them by class (assuming some combination of the classes on them are unique) or based on where they are in the DOM structure, and use the last one:

var list = document.querySelectorAll("a.listWidgetActionAdd"),
    last = list[list.length - 1];
if (last) {
    // Use `last`, it's a reference to the element
    // `last.id` is its `id` if you need it
}

Live Example:

var list = document.querySelectorAll("a.listWidgetActionAdd"),
  last = list[list.length - 1];
if (last) {
  // Use `last`, it's a reference to the element
  // `last.id` is its `id` if you need it
  document.body.innerHTML = "<code>last.id = " + last.id + "</code>";
}

<a id="document_create:nxl_item:nxw_referenceHeaderList:0:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="document_create:nxl_item:nxw_referenceHeaderList:1:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="document_create:nxl_item:nxw_referenceHeaderList:2:nxw...." class="button smallButton listWidgetActionAdd"></a>

Re your comment:

I should've mentioned this earlier that there's another add button within the field that's being created that has a similar class. Is there any way to distinguish them both? Like using a string RegExp? The difference is that the id names are different... Would that help?

If it's just a similar class name, then there's no problem — just use the other class name.

If it's the same class name, then yes, you can use the id to differentiate them. For instance, here's the above using an attribute starts with selector to only look at a elements with an id that starts with document_create:nxl_item:nxw_referenceHeaderList:

var list = document.querySelectorAll("a[id^='document_create:nxl_item:nxw_referenceHeaderList']"),
  last = list[list.length - 1];
if (last) {
  // Use `last`, it's a reference to the element
  // `last.id` is its `id` if you need it
  document.body.innerHTML = "<code>last.id = " + last.id + "</code>";
}

var list = document.querySelectorAll("a[id^='document_create:nxl_item:nxw_referenceHeaderList']"),
  last = list[list.length - 1];
if (last) {
  // Use `last`, it's a reference to the element
  // `last.id` is its `id` if you need it
  document.body.innerHTML = "<code>last.id = " + last.id + "</code>";
}

<a id="document_create:nxl_item:nxw_referenceHeaderList:0:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="some-other-format:0:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="document_create:nxl_item:nxw_referenceHeaderList:1:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="some-other-format:1:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="document_create:nxl_item:nxw_referenceHeaderList:2:nxw...." class="button smallButton listWidgetActionAdd"></a>
<a id="some-other-format:2:nxw...." class="button smallButton listWidgetActionAdd"></a>

I'm sorry, I don't quite understand the 'last' variable and the if statement that you wrote — user3851283, Jun 16 '15 at 12:39
@user3851283 In JavaScript you can do: `if(something)` to determine if it is not null and not undefined. Otherwise you could do `last.id` and get an undefined error. [Here](http://stackoverflow.com/questions/2647867/how-to-determine-if-variable-is-undefined-or-null) is an SO post speaking about it, for more information and understanding. — JasonWilczak, Jun 16 '15 at 12:46
I used your code and it does work. However, I should've mentioned this earlier that there's another add button within the field that's being created that has a similar class. Is there any way to distinguish them both? Like using a string RegExp? The difference is that the id names are different... Would that help? — user3851283, Jun 16 '15 at 12:54
@T.J.Crowder So the id name in the RegEx above, is the id name for a button that I'm trying to get it to click. Unforunately, firebug is saying that the document.getElementById(last).click() is null. — user3851283, Jun 16 '15 at 13:39
@user - `last` is an actual element. `getElementById` requires a string. See the problem here? I've not really read the code,but you _may_ find that `.getElementById(last.id)` gives you a better result. ;) — enhzflep, Jun 16 '15 at 13:46
@user3851283: last isn't a string, you use it directly: `last.click();` Also, there are no regular expressions in the answer at all, just CSS selectors. — T.J. Crowder, Jun 16 '15 at 13:52

How to get the element's ID that continually changes?

1 Answers1