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

Question

我有一個帶有標簽的簡單 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>

Answer 1

你錯過了'里面。

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

Answer 2

您沒有選擇帶有document.getElementById("job_number")的標簽。 相反，試試這個：

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

或者，您可以為標簽指定一個 id 或 class 並直接選擇它。

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

另見：相關問題

Answer 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>

您可以簡單地使用此邏輯來處理標簽

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

問題描述

4 個解決方案

解決方案1
1 2021-10-14 09:58:04

解決方案2
1 2021-10-14 10:03:36

解決方案3
1 已采納 2021-10-14 10:03:56

解決方案4
0 2021-10-14 10:10:05

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

問題描述

4 個解決方案

解決方案1 1 2021-10-14 09:58:04

解決方案2 1 2021-10-14 10:03:36

解決方案3 1 已采納 2021-10-14 10:03:56

解決方案4 0 2021-10-14 10:10:05

解決方案1
1 2021-10-14 09:58:04

解決方案2
1 2021-10-14 10:03:36

解決方案3
1 已采納 2021-10-14 10:03:56

解決方案4
0 2021-10-14 10:10:05