Access Label Tag in HTML with JavaScript

Question

I am trying to change the placeholder "Company Name (optional) to "Child's Name".

I'm not able to edit the HTML directly, but I can use a JavaScript file. I'm trying to access the below HTML with a JavaScript file.

<div class="col-md-12">
  <input class="not-required" id="company" name="company"
 type="text" value="">
  <label alt="Company Name (optional)" placeholder="Company Name (optional)"></label>
</div>

The code below adds "Child's Name" to the <input>, but I would like to add it to the <label> instead. The label does not have an id or class. Is there a way to change the label placeholder from "Company Name (optional) to "Child's Name"?

function myFunction() {
  document.getElementById("company").placeholder = "Child's Name";     
}
myFunction();

You need to select label not the input if you want to change label — Code Maniac
– Code Maniac, Commented Dec 9, 2018 at 3:59
Like this document.querySelector("#company + label").textContent = 'Child's Name'; ...which work with the existing markup. — Asons
– Asons, Commented Dec 11, 2018 at 17:20
@jkdev Yes, thanks...my mistake, forgot the inner single quote. Or one escape the inner with a backslash — Asons
– Asons, Commented Dec 11, 2018 at 17:40

jkdev · Accepted Answer · 2018-12-11 19:03:16Z

5

Solution 1

// Get label element, which is next element sibling of input element
var inputElement = document.getElementById("company");
var labelElement = inputElement.nextElementSibling;

// Set label element's content
labelElement.textContent = "Child's Name";

Or, as a one-liner:

document.getElementById("company").nextElementSibling.textContent = "Child's Name";

Note: nextElementSibling returns the next element, while nextSibling returns the next element, text node, or comment node. So in this case, using nextSibling would insert the text content before the label element, not inside it.

Solution 2

Courtesy LGSon.

// Get label element using selector
var labelElement = document.querySelector("#company + label");

// Set label element's content
labelElement.textContent = "Child's Name";

Or, as a one-liner:

document.querySelector("#company + label").textContent = "Child's Name";

edited Dec 11, 2018 at 19:03

answered Dec 11, 2018 at 17:25

jkdev

11.8k15 gold badges57 silver badges79 bronze badges

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

Comments

user2182349 · Accepted Answer · 2018-12-09 04:00:32Z

0

var el = document.getElementById("company-name-label");
el.textContent = "Child's Name";
el.alt = "Child's Name";

<div class="col-md-12">
  <input class="not-required" id="company" name="company" type="text" value="">
  <label alt="Company Name (optional)" id="company-name-label"></label>
</div>

answered Dec 9, 2018 at 4:00

user2182349

9,8323 gold badges31 silver badges44 bronze badges

1 Comment

user2182349 Over a year ago

You can do this with JavaScript. I have JavaScript that rearranging bug reporting system pages. It’s not fun, or pretty code, but it works

Paul T. · Accepted Answer · 2018-12-09 05:09:01Z

0

Know that alt and placeholder are not valid attributes for a <label> tag.

As you claim that you cannot change the HTML, you can use the nextElementSibling from the <input> reference to access the <label>.

Inside your <div>, the child elements <input> and <label> are siblings of each other.

function myFunction() {
    document.getElementById("company").nextElementSibling.innerText = "Child's Name";
}
myFunction();

<div class="col-md-12">
  <input class="not-required" id="company" name="company" type="text" value="">
  <label>Company Name (optional)</label>
</div>

edited Dec 9, 2018 at 5:09

answered Dec 9, 2018 at 5:00

Paul T.

5,02712 gold badges48 silver badges64 bronze badges

8 Comments

Gavin Over a year ago

Hi Paul, This almost works, but the label placeholder still shows up in the form. I can hide it with CSS, but that also hides the placeholder text. I really appreciate the answer though. I think it puts me on the right track.

Paul T. Over a year ago

I don't know where you are seeing a placeholder? It is not with your input, and placeholder is not a valid attribute for a label, so it should not appear.

Paul T. Over a year ago

(continued) ... I also re-added those attributes, and I cannot reproduce what you see. So, something has changed, or there is more to know. I also tried with the same attributes on Firefox and Chrome, but I cannot reproduce the situation. What browser are you using? (and the version, if it might matter)

Gavin Over a year ago

Hi Paul, I'm trying to make this change within a platform called Cratejoy. I'm using Chrome as my browser. The Cratejoy HTML file shows placeholders. Here is more of the HTML code for the section I'm trying to change with the JavaScript file:

Gavin Over a year ago

<form method="POST" action="/checkout/checkout2" id="checkout_form"> <div class="cart_addresses"> <div class="ship_to form_holder"> <section> <h3 data-barley="checkout_shipping_title" data-barley-editor="plus">Shipping Address</h3> <div class="editor "> <div class="row">

|

jkdev · Accepted Answer · 2018-12-11 17:14:05Z

0

You ask the input tag to behave like a label. You can directly access your label tag and change it.

Just add an id to your label tag and then insert this id into your getElementById.

If you want to change the displayed text, use .innerHTML or .innerText

edited Dec 11, 2018 at 17:14

jkdev

11.8k15 gold badges57 silver badges79 bronze badges

answered Dec 9, 2018 at 5:42

Yosi Leibman

3983 silver badges16 bronze badges

4 Comments

Gavin Over a year ago

I wish I could do this, but I don't have access to the HTML. So I would need to add the id to the label with JavaScript. But I don't know how to do that.

Yosi Leibman Over a year ago

You can take the element in js without touch the html. getElemetByTagName("label"), or if you have more then one you can make .querySelector("label:XnthChild") for example (change the X to what you need)

Gavin Over a year ago

Hi Yosi, It appears to be the 3rd label, should this work? .querySelector("label:3nthChild")

Yosi Leibman Over a year ago

the correct syntax is label:nth-child(3), and yes it should work. this docs can help

Collectives™ on Stack Overflow

Access Label Tag in HTML with JavaScript

4 Answers 4

Solution 1

Solution 2

Comments

1 Comment

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Solution 1

Solution 2

Comments

1 Comment

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related