change labels value with javascript, when no id or class

Question

Can you help me for changing value with javascript, but code no have id or class here is code:

<label for="flights-origin-prepop-whitelabel_en">Origin</label>

I want change "Origin" with different word.

Some examples of my code:

<button role="flights_submit" type="submit">Search</button>
<div class="mewtwo-flights-destination">
<label for="flights-destination-prepop-whitelabel_en">Destination</label>
<input type="text" 
       name="destination_name" 
       autocomplete="off" required="" 
       id="flights-destination-prepop-whitelabel_en" 
       placeholder="Destination" 
       data-label="Destination" 
       role="flights-destination" 
       data-modal-modifier="whitelabel_en" 
       data-placeholder-initialized="true">

<input type="hidden" 
       name="destination_iata" 
       id="flights-destination-whitelabel_en" value="">
</div>

How can change this placeholder "Destination", and label text Destination?

Thanks

score 4 · Accepted Answer · edited Nov 10 '16 at 21:56

4

You can change the origin texto doing this:

document.querySelector("label[for='flights-origin-prepop-whitelabel_en']").textContent = 'New Text';

edited Nov 10 '16 at 21:56

Richard.Davenport

1,453
3
16
31

answered Nov 10 '16 at 20:14

Vinicius Dias

664
3
15

It would be slightly faster to drop the label selector portion also. So: document.querySelector("[for='flights-destination-prepop-whitelabel_en']") – Richard.Davenport Nov 10 '16 at 20:16
1

And, don't use `.innerHTML` when you aren't passing any HTML, use `textContent` instead. – Scott Marcus Nov 10 '16 at 20:19
Sorry its not working for me here is Link: http://booking.aviabiletebi.org/ – Makho Kevlishvili Nov 10 '16 at 20:26
on jsfiddle its working but on my site not https://jsfiddle.net/ds1r7sLs/ – Makho Kevlishvili Nov 10 '16 at 20:29
Works on your site for me. Just open the javascript console and type document.querySelector("[for='flights-origin-prepop-whitelabel_en']"); it will return the label. – Richard.Davenport Nov 10 '16 at 20:31
Yes, its returning null also for me but when i add code in source nothing heppend – Makho Kevlishvili Nov 10 '16 at 20:34
this code in console works 100% document.querySelector("label[for='flights-origin-prepop-whitelabel_en']").textContent = 'New Text'; in my source not working thanks :( – Makho Kevlishvili Nov 10 '16 at 20:37
Its tag maybe loading after js code compile. how can we add timer for run – Makho Kevlishvili Nov 10 '16 at 20:42
The `.textContent` method is not cross browser compliant. Use the ternary method to determine whether the browser accepts `innerText` or `textContent`. – Alexander Dixon Nov 11 '16 at 14:46

jonzee · Answer 2 · 2016-11-10T20:15:55.440

0

Yes, sure, you can use querySelector with label selector including for data

console.log(document.querySelector("label[for='flights-destination-prepop-whitelabel_en']"))

<button role="flights_submit" type="submit">Search</button>
<div class="mewtwo-flights-destination">
<label for="flights-destination-prepop-whitelabel_en">Destination</label>
<input type="text" 
       name="destination_name" 
       autocomplete="off" required="" 
       id="flights-destination-prepop-whitelabel_en" 
       placeholder="Destination" 
       data-label="Destination" 
       role="flights-destination" 
       data-modal-modifier="whitelabel_en" 
       data-placeholder-initialized="true">

<input type="hidden" 
       name="destination_iata" 
       id="flights-destination-whitelabel_en" value="">
</div>

edited Nov 10 '16 at 20:15

answered Nov 10 '16 at 20:14

jonzee

1,600
12
20

It would be slightly faster to drop the label selector portion also. So: document.querySelector("[for='flights-destination-prepop-whitelabel_en']") – Richard.Davenport Nov 10 '16 at 20:15
its catching, but dont working for my website here is link: booking.aviabiletebi.org – Makho Kevlishvili Nov 10 '16 at 20:31
I copied this to console and it works `document.querySelector('label[for="flights-destination-prepop-whitelabel_en"]')` (on your webpage) – jonzee Nov 10 '16 at 20:33

Scott Marcus · Answer 3 · 2016-11-10T20:24:53.370

You can find the correct element using an "attribute selector" that looks for the for attribute and a specific value for it.

var btn = document.querySelector("button");
btn.addEventListener("click", function(){
  var el = document.querySelector("[for=flights-destination-prepop-whitelabel_en]");
  el.textContent = "New Value";
  
  var input = document.getElementById("flights-destination-prepop-whitelabel_en");
  input.setAttribute("placeholder","New Value");

  
});

<button role="flights_submit" type="button">Search</button>
<div class="mewtwo-flights-destination">
<label for="flights-destination-prepop-whitelabel_en">Destination</label>
<input type="text" 
       name="destination_name" 
       autocomplete="off" required="" 
       id="flights-destination-prepop-whitelabel_en" 
       placeholder="Destination" 
       data-label="Destination" 
       role="flights-destination" 
       data-modal-modifier="whitelabel_en" 
       data-placeholder-initialized="true">

<input type="hidden" 
       name="destination_iata" 
       id="flights-destination-whitelabel_en" value="">
</div>

score 0 · Answer 4 · edited May 23 '17 at 12:01

The first step would be to set an array of the elements you want to target, which in this case is label. Then you would iterate through that array using a for loop to see if the textContent of that label is what you wanted to change. Finally, once you've 'hooked' the label you need, you can change the attributes for it as necessary. Please also note that textContent method is not cross browser compliant and so I've included a ternary script that will circumvent that thanks to this handy StackOverflow post .

HTML:

<button role="flights_submit" type="submit">Search</button>
<br/>
<br/>
<div class="mewtwo-flights-destination">
    <label for="flights-destination-prepop-whitelabel_en">Destination</label>

    <input type="text" name="destination_name" autocomplete="off" required="" id="flights-destination-prepop-whitelabel_en" placeholder="Destination" data-label="Destination" role="flights-destination" data-modal-modifier="whitelabel_en" data-placeholder-initialized="true">
    <br/>
    <br/>
    <label for="somethingElse">OtherLabel</label>
    <input type="text" id='somethingElse'>

    <input type="hidden" name="destination_iata" id="somethingElse" value="">
</div>

JavaScript:

//https://stackoverflow.com/a/285608/5076162
//https://stackoverflow.com/a/13506703/5076162

var labelArray = document.getElementsByTagName('LABEL');
console.log(labelArray);
var textToChange = 'Destination';

for (var i = 0; i < labelArray.length; i++) {
    var currentLabel = labelArray[i]
    var text = ('innerText' in labelArray[i]) ? 'innerText' : 'textContent';
    if (currentLabel[text] === 'Destination') {
        var matchingInput = document.getElementById(currentLabel.htmlFor);
        var newText = 'changedDestination';
        var newPlaceHolder = 'changedPlaceHolder';

        currentLabel[text] = newText;
        matchingInput.placeholder = newPlaceHolder;
    }
}

jsfiddle Example

//https://stackoverflow.com/a/285608/5076162
//https://stackoverflow.com/a/13506703/5076162

var labelArray = document.getElementsByTagName('LABEL');
console.log(labelArray);
var textToChange = 'Destination';

for (var i = 0; i < labelArray.length; i++) {
  var currentLabel = labelArray[i]
  var text = ('innerText' in labelArray[i]) ? 'innerText' : 'textContent';
  if (currentLabel[text] === 'Destination') {
    var matchingInput = document.getElementById(currentLabel.htmlFor);
    var newText = 'changedDestination';
    var newPlaceHolder = 'changedPlaceHolder';

    currentLabel[text] = newText;
    matchingInput.placeholder = newPlaceHolder;
  }
}

<button role="flights_submit" type="submit">Search</button>
<br/>
<br/>
<div class="mewtwo-flights-destination">
  <label for="flights-destination-prepop-whitelabel_en">Destination</label>

  <input type="text" name="destination_name" autocomplete="off" required="" id="flights-destination-prepop-whitelabel_en" placeholder="Destination" data-label="Destination" role="flights-destination" data-modal-modifier="whitelabel_en" data-placeholder-initialized="true">
  <br/>
  <br/>
  <label for="somethingElse">OtherLabel</label>
  <input type="text" id='somethingElse'>

  <input type="hidden" name="destination_iata" id="somethingElse" value="">
</div>

score 0 · Answer 5 · answered Aug 12 '23 at 04:22

0

if wanna get the label for with contains text for me is using this one

document.querySelector("label[for*='flights-origin-prepop-whitelabel_en']").textContent = 'New Text';

answered Aug 12 '23 at 04:22

user8124226

104
12

change labels value with javascript, when no id or class

5 Answers5