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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.