Question

I am trying to access HTML elements by their id from an array of HTML Elements. I created this array using the getElementsByTagName and I am trying to access these elements like this: arrayName.getElementById("theId").

Basically this is what I am trying to implement:

In a Javascript function triggered by an onchange event I receive the reference to the element causing the trigger. Since its a table structure I get the reference to a <td> element.
Now I want to access all the other elements of the <tr> in which that <td> is, using the id of each individual element.

A small replica of my code:

function chngFunction(theTd){
    var thisRow = theTd.parentNode;
    var inputs = thisRow.getElementsByTagName("input");
    alert(inputs[0].value);///////////Currently what I am doing////
    alert(inputs[1].value);///////////Currently what I am doing////
    .
    .
    .
    //////// What I would like ////////
    //// alert(thisRow.getElementById("myId").value);  // or something like that////
    /////////////// OR ///////////////
    //// alert(inputs[].getElementById("myId").value); // or something like that////
    ///////////////////////////////////

This is what I want because, currently if I make any structural changes to my jsp, I have to make changes to js also (that can leave bugs). So using ids to access individual elements would be great.

Please help me out.

Answer 1

You could use querySelector API.

This should work:

thisRow.querySelector('#myId');

And if your element ids are unique across the document (as they should be), you can just do document.getElementById.