Javascript innerHtml and value for textbox and label issue

Question

I have below javascript code.

var txtone = document.getElementByID("txtone");
var lblone = document.getElementByID("lblone");
var tone =  txtone.value;
var lone = lblone.innerHTML;

Now the problem is there are cases when I dont have txtone or lblone in my page so in that case last two lines of my code gives error.

solution for this is to check if they exists might be like this code.

var txtone = document.getElementByID("txtone");
var lblone = document.getElementByID("lblone");
if(txtone)
var tone =  txtone.value;
if(lblone)
var lone = lblone.innerHTML;

but In my case I have around 100 to 200 textbox and labels with are rendered based on some condition. So in that case I dont think the give solution will be the best one.

Is there any easy way out to my problem something like prototyping value or innerHtml.

(It is an aspx web site page)

you can simplify it using var tone = txtone ? txtone.value : undefined;, also you can write a wrapper function to get the value — Arun P Johny
– Arun P Johny, Commented Jun 29, 2013 at 7:08
Thanks for your ans but in all the cases I have to go and make the changes in all the places where I access textbox and label I am trying to avoid it. like we prototype trim() function to work in all the browser. If something like that works out then I dont have to make changes in all the lable and textbox just one function and its done — Yagnesh.Dixit
– Yagnesh.Dixit, Commented Jun 29, 2013 at 7:34

yeyene · Accepted Answer · 2013-06-29 08:18:21Z

1

Update answer

Check DEMO http://jsfiddle.net/tD6eC/1/

You can use without class or ID like that.

HTML

<label id="">label 1</label><input  id="" value="1" /><br />
<label id="">label 2</label><input  id="" value="2" /><br />
<label id="">label 3</label><input  id="" value="3" /><br />
<label id="">label 4</label><input  id="" value="4" /><br />
<label id="">label 5</label><input  id="" value="5" /><br />
<div id="content"></div>

JQUERY

$(document).ready(function(){
    var val, label;
    $('label').each(function(){
        val = $(this).html();
        label = $(this).next('input').val();
        if(val != 'undefined' && label != 'undefined'){
            $('#content').append(val+' : '+label+'<br />');
        }
    });
});

edited Jun 29, 2013 at 8:18

answered Jun 29, 2013 at 7:24

yeyene

7,4001 gold badge24 silver badges29 bronze badges

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

3 Comments

Yagnesh.Dixit Over a year ago

Thanks a lot for your interest but I don't have a class with name txtone I have 100 to 200 textbox and labels with different id

yeyene Over a year ago

Then, check my update answer again, you can use without any id or class, and no need to modify your code again as long as you are using label and input(must be behind label) ...jsfiddle.net/tD6eC/1

Yagnesh.Dixit Over a year ago

yes this can be done but I have to change all of my code I have used document.getElementById at many places and many function call I have to change all of that so I think its better to add if condition rather then doing this stuff. Thanks a lot for your interest.

Collectives™ on Stack Overflow

Javascript innerHtml and value for textbox and label issue

1 Answer 1

Update answer

HTML

JQUERY

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update answer

HTML

JQUERY

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related