如何使用javascript输入变量以更改标签文本

我正在尝试这样做，当用户在输入框中输入一个名称，然后单击“输入候选项”按钮时，它将更改下面标签的名称。有没有办法用javascript实现这一点？我刚刚开始编码，所以我有点新手

            <form class="simple-form">
                <div>Enter your candidate <b>names</b> in the boxes below:</div>
                <br/>
                <label for="C1">Candidate 1:</label>
                <input type="text" name="C1" id="C1" class="InputBox" />
                <br/>
                <label for="C2">Candidate 2:</label>
                <input type="text" name="C2" id="C2" class="InputBox" />
                <br/>
                <label for="C3">Candidate 3:</label>
                <input type="text" name="C3" id="C3" class="InputBox" />
                <br/>
                <label for="C4">Candidate 4:</label>
                <input type="text" name="C4" id="C4" class="InputBox" />
                <br/>
                <label for="C5">Candidate 5:</label>
                <input type="text" name="C5" id="C5" class="InputBox" />
                <br/>
                <input type="button" OnClick="EnterCandidates" value="Enter Candidates" />
                <br/>

                <br/>
                <div>Enter the candidates <b>votes</b> in the boxes below:</div>
                <br/>
                <label for="V1" id="L_V1">Name 1:</label>
                <input type="text" name="V1" id="I_V1" class="InputBox" />
                <br/>
                <label for="V2" id="L_V2">Name 2:</label>
                <input type="text" name="V2" id="I_V2" class="InputBox" />
                <br/>
                <label for="V3" id="L_V3">Name 3:</label>
                <input type="text" name="V3" id="I_V3" class="InputBox" />
                <br/>
                <label for="V4" id="L_V4">Name 4:</label>
                <input type="text" name="V4" id="I_V4" class="InputBox" />
                <br/>
                <label for="V5" id="L_V5">Name 5:</label>
                <input type="text" name="V5" id="I_V5" class="InputBox" />
                <br/>
                <input type="button" OnClick="" value="Enter Votes" />
                <br/>
            </form>

我如何添加一个验证，以便用户只能使用字符串，并且它有一个特定的字符限制，比如20个字符？

---

我试着给它添加一个你们的建议，但我想我做错了，因为它不起作用

您可能想使用

document.getElementById('Label ID').innerHTML = document.getElementById('Input ID').value

---

请看这里：

希望这是您所期待的

document.getElementById('L_V1').innerHTML= document.getElementById('C1').value;

//字符验证

var val = document.getElementById('c2').value;

if (!val.match(/^[a-zA-Z]+$/)) 
{
    alert('Only alphabets are allowed');
    return false;
}

if (val.length >10) {
   alert("characters are too long !")
} 

//长度验证

var val = document.getElementById('c2').value;

if (!val.match(/^[a-zA-Z]+$/)) 
{
    alert('Only alphabets are allowed');
    return false;
}

if (val.length >10) {
   alert("characters are too long !")
} 

---

我认为，以下JavaScript实现了您想要的输出：

function EnterCandidates() {

    // Using document.querySelectorAll() to get the <input> elements
    // whose id attribute/property starts with the upper-case letter C:
    var candidateNameInputs = document.querySelectorAll('input[id^=C]'),

    // finding the <label> elements whose 'for' attribute starts with
    // the upper-case letter V, and whose id starts with the string "L_V":
        names = document.querySelectorAll('label[for^=V][id^=L_V]');

    // using Function.prototype.call() to iterate over the Array-like
    // nodeList, returned by document.querySelectorAll, using an
    // an Array method (Array.prototype.forEach()):
    Array.prototype.forEach.call(names, function (label, index) {
        // the first argument of the anonymous function ('label')
        // is the array-element of the Array (or Array-like) structure
        // over which we're iterating, and is a <label> element,
        // the second argument ('index') is the index of that current
        // element in the Array (or Array-like structure).

        // if the value of the <input> at the same index in the collection
        // as the current <label>'s index has a value that is not
        // equal to its default-value:
        if (candidateNameInputs[index].value !== candidateNameInputs[index].defaultValue) {

            // we update the textcontent of the <label> to be
            // equal to that of the value entered in the <input>
            label.textContent = candidateNameInputs[index].value;
        }
    });
}

标签：：之前{ 内容：\A； 空白：预处理； } 标签：：之后{ 内容:'：'； } 标签 输入{ 框大小：边框框； 线高：1.4em； 高度：1.4em； 边缘底部：0.2米； } 输入[类型=按钮]：最后一个子项{ 显示：块； } 在下面的框中输入您的候选人姓名： 候选人1 候选人2 候选人3 候选人4 候选人5 在下面的框中输入候选人的投票： 名字1 名称2 名字3 名字4 名字5

---

谢谢有没有办法确保用户只输入具有特定字符限制的字符串？你是说长度限制吗？如果是，可以使用string.length进行检查。请参见此处：@erohs2000:如果您需要在问题中添加要求，请编辑问题；不要隐藏应该在其他答案的评论中通知所有用户的方面。帮助我们所有人帮助您更新问题“编辑”链接位于您问题的标签下方。是否有方法对此添加验证，以便用户只能使用字母表中的字母。还有一个字符限制，用户只能键入