Issue
I have a simple HTML textbox with a label, and I want to be able to change the label value using JavaScript (As I cannot access the HTML), 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>
Solution
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
Answered By - Patrick Hund
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.