display text from array in html label tags with unque id using javascript

Question

i'm new in javascript, i have the following html code:

<form role="form" >       
<label for="element1" id="element1_label"></label>
<input type="text" id="element1" />

<label for="element2" id="element2_label"></label>
<input type="text" id="element2" name="element2">

<label for="element3" id="element3_label"></label>
<input type="number" id="element3" name="element3s">

<button type="submit" >submit</button>

and i want to display some text from options array by following javascript code:

       var piced = 'opt';
        var options = {
            opt: {
                element1_label: "text1",
                element2_label: "text2",
                element3_label: "text3",
            },
            newopt: {
                element1_label: "new text1",
                element2_label: "new text2",
                element3_label: "new text3",
            }
        };

        jQuery('label').each(function()
        {
            jQuery(this).innerText = options[piced][jQuery(this).attr('id')];

        });

i want to display in each html label value of such index of piced array. for example:

<label for="element1" id="element1"> text1 </label>
<input type="text" id="element1" />

<label for="element2" id="element2"> text2 </label>
<input type="text" id="element2" name="element2">

but this code not change the text of label tags.what is problem?

ID should be unique throughout the page

RomanPerekhrest
– RomanPerekhrest

2016-07-30 10:55:55 +00:00
Commented Jul 30, 2016 at 10:55 — RomanPerekhrest
– RomanPerekhrest, Commented Jul 30, 2016 at 10:55
opps! I changed the ID still not work.

shahidi
– shahidi

2016-07-30 11:05:57 +00:00
Commented Jul 30, 2016 at 11:05 — shahidi
– shahidi, Commented Jul 30, 2016 at 11:05

Mitya · Accepted Answer · 2016-07-30 11:11:41Z

1

innerText is a native property, not a jQuery one. The jQ equivalent is the text() method. Change to either:

 jQuery(this).text(options[piced][jQuery(this).attr('id')]);

or (retrieving the native element reference from the jQuery stack)

jQuery(this)[0].innerText = options[piced][jQuery(this).attr('id')];

answered Jul 30, 2016 at 11:11

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

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

3 Comments

David Thomas Over a year ago

Please don't use $(this).attr('id') or $(this).prop('id'); it's so much cheaper and easier to simply use this.id.

Mitya Over a year ago

You should probably address this to the OP. I addressed his main problem; the part you reference I just copied over.

David Thomas Over a year ago

Of course, but the comment was on your answer because you copied over that portion into your working code, and there was no explanation of why it's unnecessary, and unnecessarily bad, to use jQuery to retrieve a cross-browser property of a node. Plus the OP will be - I think - notified of comments to your answer as well, plus when the answer is reviewed by the OP s/he will (presumably) also see the comment.

Rounin · Accepted Answer · 2016-07-30 11:47:25Z

0

Here is a vanilla Javascript approach which loops through the labels and writes the textContent of each label (labels[i].textContent) as:

options[piced][labels[i].id];

var piced = 'opt';

var options = {
    
    opt: {
        element1_label: "text1",
        element2_label: "text2",
        element3_label: "text3",
    },

    newopt: {
        element1_label: "new text1",
        element2_label: "new text2",
        element3_label: "new text3",
    }

};

var labels = document.getElementsByTagName('label');

for (var i = 0; i < labels.length; i++) {
    labels[i].textContent = options[piced][labels[i].id];
}

<form role="form" >       
<label for="element1" id="element1_label"></label>
<input type="text" id="element1" />

<label for="element2" id="element2_label"></label>
<input type="text" id="element2" name="element2">

<label for="element3" id="element3_label"></label>
<input type="number" id="element3" name="element3">

<button type="submit" >submit</button>

N.B. I wouldn't go so far as to say never use innerText - but it is important to know that textContent is standard javascript while innerText is non-standard (originally a proprietary property introduced by Internet Explorer, later adopted by WebKit, Blink and Opera).

See this 2015 blog post:

Node.textContent (2015) by Mozilla Developer Network
The poor, misunderstood innerText (2015) by kangax

to fully grasp the differences between textContent and innerText.

The cross-browser solution (to handle legacy versions of IE) is, of course:

var text = element.textContent || element.innerText;

edited Jul 30, 2016 at 11:47

answered Jul 30, 2016 at 11:32

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

2 Comments

shahidi Over a year ago

i dont why but in my code var labels = document.getElementsByTagName('label'); return null! I use this in wordpress.

Rounin Over a year ago

I'm not sure why either. In javascript, document.getElementsByTagName('ELEMENT'); will always return a NodeList containing all of those ELEMENTs.

Collectives™ on Stack Overflow

display text from array in html label tags with unque id using javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related