Javascript 在javascript中的document.getElementByid中传递变量

Pass variable in document.getElementByid in javascript

提问by Nitin Kabra

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 ?

我有一个变量 account_number ，其中存储了帐号。现在我想获取 id 为 account_number 的元素的值。如何在 javascript 中做到这一点？

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

我试过做 document.getElementById(account_number).value，但它是空的。

html looks like this :

html 看起来像这样：

<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 :

和 js 是：

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.

这里 bene_account_number_edit 是单选按钮。

Thanks

谢谢

回答by Adam Eberlin

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

您是否仅存储一个整数作为元素的id属性？如果是这样，浏览器在通过整数 id 查找元素时往往会以奇怪的方式表现。尝试通过account_number.toString()，而不是。

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

如果这不起作用，请在元素id属性的开头添加“account_”之类的内容，然后调用document.getElementById('account_' + account_number).value.

回答by zzzzBov

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

为什么'要在名称字符串中添加前缀和后缀字符？ben_name已经是一个字符串，因为您已附加'_name'到该值。

I'd recommend doing a console.logof ben_namejust to be sure you're getting the value you expect.

我建议你做一个console.log，ben_name以确保你得到你期望的价值。

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

使用变量的方法与document.getElementById任何其他函数相同：

document.getElementById(ben_name);

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

我不知道为什么你认为它的行为会有所不同。

回答by Mohit Satish Pawar

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.

将 ben_name 转换为字符串是没有用的，因为它已经是字符串了。两个字符串的连接总是会给你字符串。

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.

我已经测试过类似类型的代码可以正常工作。如果您正在传递变量，请不要使用引号。您正在做的是将 ben_name.toString() 作为值传递，它肯定会导致错误，因为它找不到具有该 id 的任何元素，即（ben_name.toString()）。在每个函数调用中，您都传递相同的值，即 ben_name.toString() 这当然是错误的。

回答by Daniel Atmiva

I found this page in search for a fix for myissue...

我发现此页面是为了寻找解决我的问题的方法...

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:

设计师让所有的价格都有 . 上标。因此，您的选择是让 cms 从后端将价格分成 2 个部分，然后将其与<sup>周围的标签放在一起，或者只是不理会它并通过 DOM 更改它。这就是我选择的，这就是我想出的：

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:

这是我使用的 CSS：

.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

这是成品的截图