CODEWITHSUNDEEP
javascripthtml
aDoN
aDoN

Reputation: 1951

Change value of label element inserting href inside

I have this element:

<li class="choice-1 depth-1"><input type="checkbox" id="wpforms-1028-field_3_1" name="wpforms[fields][3][]" value="Acepto la política de privacidad" required ><label class="wpforms-field-label-inline" for="wpforms-1028-field_3_1">Acepto la política de privacidad</label></li>

I want to change this text: Acepto la política de privacidad

to this: Acepto la <a href='https://XXXX/gdpr/'>política de privacidad TEST</a>

I have tried this code:

document.getElementById("wpforms-1028-field_3_1").value="Acepto la <a href='https://XXXX/gdpr/'>política de privacidad TEST</a>"

But it doesn't work because it seem I am not inside the "label" element.

Upvotes: 1

Views: 317

Answers (2)

Amanur Rahman
Amanur Rahman

Reputation: 358

You can use document query selector

document.querySelector(".wpforms-field-label-inline").innerHTML = "cepto la <a href='https://XXXX/gdpr/'>política de privacidad TEST</a>";

Upvotes: 2

Crezzur
Crezzur

Reputation: 1479

Keep in mind that you use getElementById and added a class name to search for. getElementById function searches for data inside the ID attribute:

<div id="TO FIND"></div>

Replace code using element ID

If you want to use the ID element you can do this with the following code:

document.getElementById("test").innerHTML = "your HTML code";

I have added a example below with a button, if you click it your requested change will be added.

function test() {
  document.getElementById("test").innerHTML = "Acepto la <a href='https://XXXX/gdpr/'>política de privacidad TEST</a>";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="choice-1 depth-1">
  <input type="checkbox" id="wpforms-1028-field_3_1" name="wpforms[fields][3][]" value="Acepto la política de privacidad" required>
  <label id="test" class="wpforms-field-label-inline" for="wpforms-1028-field_3_1">Acepto la política de privacidad</label></li>

<button onClick="test();">Click me to change</button>

Replace code using element CLASS NAME

To make the changes by search on class name you have to use following code

    document.getElementsByClassName("wpforms-field-label-inline")[0].innerHTML = "Acepto la <a href='https://XXXX/gdpr/'>política de privacidad TEST</a>";

Upvotes: 0

Related Questions