Change the value of an label using innerText Javascript

Question

I am trying to change the text value of an label inside an li inside an ul.

So:

HTML and JS

document.getElementsByClassName("hs-error-msgs inputs-list").innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

I know, but how is possible to change the value of the text ? — Luis Filipe Escobar
– Luis Filipe Escobar, Commented Feb 7, 2018 at 10:33

dfsq · Accepted Answer · 2018-02-07 10:34:27Z

1

getElementsByClassName returns a collection. You could take the first element of this collection and then select label within it with for example another collection method getElementsByTagName.

var ul = document.getElementsByClassName("hs-error-msgs inputs-list")[0]
var label = ul.getElementsByTagName('label')[0]

label.innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

However way more convenient method for this is querySelector:

var label = document.querySelector(".hs-error-msgs.inputs-list label")

label.innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

answered Feb 7, 2018 at 10:34

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

Luis Filipe Escobar Over a year ago

Thank you. But now I need to use in the other. How can I use querySelectorAll properly?

dfsq Over a year ago

@LuisFilipeEscobar querySelectorAll is a collection. So you need to iterate.

var labels = document.querySelectorAll(".hs-error-msgs.inputs-list label"); for (var i = 0; i < labels.length; i++) { labels[i].innerHTML = '....' }

.

gurvinder372 · Accepted Answer · 2018-02-07 10:34:51Z

0

You need to query the label, use querySelector

var text = "Bitte füllen Sie dieses Pflichtfeld aus!";
document.querySelector( ".hs-error-msgs inputs-list li label").innerText = text;

answered Feb 7, 2018 at 10:34

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Phil · Accepted Answer · 2018-02-07 10:36:26Z

0

Use querySelector to get a single item in one line.

document.querySelector(".hs-error-msgs.inputs-list label").innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

This will select a single label from inside the element with your specified classes. If you have multiple items, use querySelectorAll and iterate with a for loop.

answered Feb 7, 2018 at 10:36

Phil

2,8171 gold badge26 silver badges30 bronze badges

Collectives™ on Stack Overflow

Change the value of an label using innerText Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related