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>
You are missing the ' inside.
$("label[for='job_number]'").html("New Text");
$("label[for='job_number]'").text("New Text");
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.
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