How do I change the <label for> value, using JavaScript?-CodePudding

I have a simple HTML textbox with a label, and I want to be able to change the label value using JavaScript. I have tried various methods as outlined below, but nothing seems to be successful. Any help would be appreciated!

HTML:

<html>
    <body>
    
    <li id="job_number_wrapper">
        <label for="job_number">I WANT TO CHANGE THIS TEXT</label>
        <input type="text" id="job_number" name="job_number">
    </li>

Javascript:

<script>

function myFunction() {
    document.getElementById("job_number").htmlForVal = "New text"; //does nothing
    
    if (job_number_wrapper.textContent)
        job_number_wrapper.textContent = "New Text";  //changes text, but removes text box
    
    if (job_number.textContent)
        job_number.textContent = "New Text";  //does nothing
        
        
    $("label[for=job_number]").html("New Text"); //does nothing
    $("label[for=job_number]").text("New Text"); //does nothing
    
    document.getElementById('job_number').innerHTML = 'New Text'; //does nothing
    document.getElementById('job_number').innerText = 'New Text'; //does nothing
    document.getElementById('job_number').value = 'New Text'; //does nothing
    
    $('#job_number').val("New Text"); //populates the textbox value, but does not change the label
    
    
    var label = document.querySelector('label[for="job_number"]');  //does nothing
    label.textContent = "New Text"        //does nothing
}
    
myFunction();
    
</script>

</body>
</html>

CodePudding user response：

You are missing the ' inside.

$("label[for='job_number]'").html("New Text"); 
$("label[for='job_number]'").text("New Text");

CodePudding user response：

You almost got it right when you tried the querySelector call:

var label = document.querySelector('label[for="job_number"]');  //does nothing
label.textContent = "New Text"        //does nothing

The only reason this selector fails is the double quotes you are using to select the job_number. Remove them and it will work:

var label = document.querySelector("label[for=job_number]");
label.textContent = "New Text";

<label for="job_number">I WANT TO CHANGE THIS TEXT</label>
<input type="text" id="job_number" name="job_number" />

See also: related question

CodePudding user response：

You're not selecting the label with document.getElementById("job_number"). Instead, try this:

const labelEl = document.querySelector('#job_number_wrapper label');`

Or, you can give an id or class to your label and select it directly.

CodePudding user response：

 function test() {
        const e = document.querySelector("label[for=job_number]");
        e.innerText = "some other name";
        
      }

 <li id="job_number_wrapper">
        <label for="job_number">I WANT TO CHANGE THIS TEXT</label>
        <input type="text" id="job_number" name="job_number" />
      </li>
      
<button onclick="test()">change label text</button>

You can simply use this logic to play around the labels