Javascript: constructing html element IDs programmatically

Question

I need to access the values of a number of fields in my page and perform the same calculations on them. I would like to do something like this, allowing me to dynamically access different form elements, but I cannot get it to work:

function numInFamily(famID) {
    var numAdults;
    var numChildren;
    var adultFieldID;
    var childFieldID;

    adultFieldID = 'numAdultsFam' + toString(famID);
    childFieldID = 'numKidsFam' + toString(famID);

    numAdults = parseInt(document.getElementById(adultFieldID).value,10);
    numChildren = parseInt(document.getElementById(childFieldID).value,10);

    return numAdults + numChildren;
}

Could anyone explain how I can dynamically reference these elements?

Šime Vidas · Accepted Answer · 2012-05-14 22:17:44Z

1

There is no built-in toString global function. But you don't need such a function, since the + operator does the string conversion automatically. Just replace the first two assignments with this:

adultFieldID = 'numAdultsFam' + famID;
childFieldID = 'numKidsFam' + famID;

Also, you can rewrite the function like so:

var numInFamily = (function () {     
    function getVal ( id ) {
        return parseInt( document.getElementById( id ).value, 10 );
    }

    return function ( famID ) {
        return getVal( 'numAdultsFam' + famID ) + getVal( 'numKidsFam' + famID );
    };    
}());

This will remove the code repetition.

edited May 14, 2012 at 22:17

answered May 14, 2012 at 22:00

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

trex005 Over a year ago

loved the 5 different versions of your answer you posted... :)

Šime Vidas Over a year ago

@trex005 Hehe, I keep improving it until I'm satisfied.

burgerB Over a year ago

@ŠimeVidas- thanks! The problem was indeed with the toString(). Changing that alone solved the issue. I appreciate the further guidance on streamlining the code as well.

Collectives™ on Stack Overflow

Javascript: constructing html element IDs programmatically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related