如何使用 JavaScript 更改 <label for> 值？答案

【问题标题】：How do I change the <label for> value, using JavaScript?如何使用 JavaScript 更改 <label for> 值？
【发布时间】：2021-12-02 16:57:33
【问题描述】：

我有一个带有标签的简单 HTML 文本框，我希望能够使用 JavaScript 更改标签值。我尝试了以下概述的各种方法，但似乎没有任何成功。任何帮助将不胜感激！

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>

【问题讨论】：

标签： javascript html textbox label

【解决方案1】：

您缺少内部的'。

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

【讨论】：

…或者根本不使用双引号或单引号。这也有效： var label = document.querySelector('label[for=job_number]');
是的。我看到了 jquery 选择器并尝试修复它。后面代码没看到querySelector

【解决方案2】：

您没有选择带有document.getElementById("job_number") 的标签。相反，试试这个：

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

或者，您可以为您的标签指定一个 id 或类并直接选择它。

【讨论】：

【解决方案3】：

当您尝试调用querySelector 时，您几乎成功了：

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

此选择器失败的唯一原因是您用于选择job_number 的双引号。删除它们，它将起作用：

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" />

另请参阅：related question

【讨论】：

完美地完成了这项工作！谢谢

【解决方案4】：

 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>

你可以简单地使用这个逻辑来玩标签

【讨论】：