Pass variable in document.getElementByid in javascript

Question

I have a variable account_number in which account number is stored. now i want to get the value of the element having id as account_number. How to do it in javascript ?

I tried doing document.getElementById(account_number).value, but it is null.

html looks like this :

<input class='transparent' disabled type='text' name='113114234567_name' id='113114234567_name' value = 'Neeloy' style='border:0px;height:25px;font-size:16px;line-height:25px;' />

and the js is :

function getElement()
{   
 var acc_list = document.forms.editBeneficiary.elements.bene_account_number_edit;

    for(var i=0;i<acc_list.length;i++)
        {
            if(acc_list[i].checked == true)
                {

                    var account_number = acc_list[i].value.toString();
                    var ben_name = account_number + "_name";

                    alert(document.getElementById("'" + ben_name.toString() + "'").value);
                }
         }

}

here bene_account_number_edit are the radio buttons.

Thanks

Is the element w/ id account_number an <input> element or something else? — ampersand
– ampersand, Commented Sep 25, 2011 at 18:36
yes there is a input type in a form with id as account_number's value — Nitin Kabra
– Nitin Kabra, Commented Sep 25, 2011 at 18:41
<input class='transparent' disabled type='text' name='113114234567_name' id='113114234567_name' value = 'Neeloy' style='border:0px;height:25px;font-size:16px;line-height:25px;' /> — Nitin Kabra
– Nitin Kabra, Commented Sep 25, 2011 at 19:10
id values cannot start with a number. They must start with a letter. They can have numbers in them so name_113114234567 is a valid ID, but 113114234567_name is not. — jfriend00
– jfriend00, Commented Sep 25, 2011 at 19:24
your taking the value and use it for the elementsId - this wont match .. — rémy
– rémy, Commented Sep 25, 2011 at 19:24

Adam Eberlin · Accepted Answer · 2011-09-25 18:37:10Z

7

Are you storing just an integer as the element's id attribute? If so, browsers tend to behave in strange ways when looking for an element by an integer id. Try passing account_number.toString(), instead.

If that doesn't work, prepend something like "account_" to the beginning of your elements' id attributes and then call document.getElementById('account_' + account_number).value.

answered Sep 25, 2011 at 18:37

Adam Eberlin

14.3k5 gold badges40 silver badges49 bronze badges

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

2 Comments

Nitin Kabra Over a year ago

it's not working even after adding 'account_' and .toString() :-(

Adam Eberlin Over a year ago

And you prepended account_ to the id attribute of your <input> element? And the input's value is set beforehand?

zzzzBov · Accepted Answer · 2011-09-25 19:43:38Z

1

Why are you prefixing and post-fixing ' characters to the name string? ben_name is already a string because you've appended '_name' to the value.

I'd recommend doing a console.log of ben_name just to be sure you're getting the value you expect.

the way to use a variable for document.getElementById is the same as for any other function:

document.getElementById(ben_name);

I don't know why you think it would act any differently.

answered Sep 25, 2011 at 19:43

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Comments

Mohit Satish Pawar · Accepted Answer · 2017-06-22 10:47:12Z

There is no use of converting ben_name to string because it is already the string. Concatenation of two string will always give you string.

var account_number = acc_list[i].value.toString();
var ben_name = account_number + "_name";

try following code it will work fine

var ben_name=acc_list[i]+ "_name";

here also

alert(document.getElementById("'" + ben_name.toString() + "'").value);

try

alert(document.getElementById(ben_name).value);

I have tested similar type of code which worked correctly. If you are passing variable don't use quotes. What you are doing is passing ben_name.toString() as the value, it will definitely cause an error because it can not find any element with that id viz.(ben_name.toString()). In each function call, you are passing same value i.e. ben_name.toString() which is of course wrong.

Daniel Atmiva · Accepted Answer · 2017-10-30 21:52:55Z

0

I found this page in search for a fix for my issue...

Let's say you have a list of products:

<div class="rel-prod-item">
    <img src="assets/product-photos/title-of-the-related-product_thumbnail.jpg" alt="Western Digital 1TB" />
    <p class="rel-prod-title">Western Digital 1TB</p>
    <p class="rel-prod-price" id="price_format_1">149.95</p>
    <a href="#" title="Western Digital 1TB" class="gray-btn-sm add-to-cart text-shadow">add to cart</a>
</div>

<div class="rel-prod-item">
    <img src="assets/product-photos/title-of-the-related-product_thumbnail.jpg" alt="Western Digital 1TB" />
    <p class="rel-prod-title">Western Digital 1TB</p>
    <p class="rel-prod-price" id="price_format_2">139.95</p>
    <a href="#" title="Western Digital 1TB" class="gray-btn-sm add-to-cart text-shadow">add to cart</a>
</div>

<div class="rel-prod-item">
    <img src="assets/product-photos/title-of-the-related-product_thumbnail.jpg" alt="Western Digital 1TB" />
    <p class="rel-prod-title">Western Digital 1TB</p>
    <p class="rel-prod-price" id="price_format_3">49.95</p>
    <a href="#" title="Western Digital 1TB" class="gray-btn-sm add-to-cart text-shadow">add to cart</a>
</div>

The designer made all the prices have the digits after the . be superscript. So your choice is to either have the cms spit out the price in 2 parts from the backend and put it back together with <sup> tags around it, or just leave it alone and change it via the DOM. That's what I opted for and here's what I came up with:

window.onload = function() {

    var pricelist = document.getElementsByClassName("rel-prod-price");
    var price_id = "";
    for (var b = 1; b <= pricelist.length; b++) {
        var price_id = "price_format_" + b;
        var price_original = document.getElementById(price_id).innerHTML;
        var price_parts = price_original.split(".");
        var formatted_price = price_parts[0] + ".<b>" + price_parts[1] + "</b>";
        document.getElementById(price_id).innerHTML = formatted_price;
    }

}

And here's the CSS I used:

.rel-prod-item p.rel-prod-price b {
    font-size: 50%;
    position: relative;
    top: -4px;
}

I hope this helps someone keep all their hair :-)

Here's a screenshot of the finished product

edited Oct 30, 2017 at 21:52

answered Oct 30, 2017 at 21:46

Daniel Atmiva

11 bronze badge

3 Comments

Daniel Atmiva Over a year ago

Yes. As you can see, the variable price_id is, well, a variable... that gets passed into document.getElementById in javascript...

EhsanT Over a year ago

OK, although I do not think it's related, the question was asked in 2011 and also have an accepted answer in 2011 and has nothing to do with css cms and backend code, You could just post that part of your code which was related to the question!

EhsanT Over a year ago

For asking question, it's better to post as much information as you can in which will help others to have a better understanding of your problem. But for posting an answer, it's better to post the code which is specifically written for that question. But keep up good work :)

Collectives™ on Stack Overflow

Pass variable in document.getElementByid in javascript

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related