Tengo un cuadro de texto HTML simple con una etiqueta y quiero poder cambiar el valor de la etiqueta usando JavaScript. He intentado varios métodos como se describe a continuación, pero nada parece tener éxito. ¡Cualquier ayuda sería apreciada!
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>Te estás perdiendo el ' dentro.
$("label[for='job_number]'").html("New Text"); $("label[for='job_number]'").text("New Text");No está seleccionando la etiqueta con document.getElementById("job_number") . En su lugar, intente esto:
const labelEl = document.querySelector('#job_number_wrapper label');O bien, puede asignar una identificación o clase a su etiqueta y seleccionarla directamente.
Casi acertaste cuando intentaste la llamada a querySelector :
var label = document.querySelector('label[for="job_number"]'); //does nothing label.textContent = "New Text" //does nothing La única razón por la que este selector falla son las comillas dobles que está utilizando para seleccionar el job_number . Quítalos y funcionará:
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" />Ver también: pregunta relacionada