Question

我正在尝试这样做，以便当用户在输入框中输入名称然后单击“输入候选人”按钮时，它将更改下面标签的名称。有没有办法在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>

感谢所有帮助过我的人。还有一个问题。我决定使用这段代码（感谢@David Thomas）：

function EnterCandidates() {
  var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]');

  Array.prototype.forEach.call(names, function(label, index) {
    if (candidateNameInputs[index].value !== candidateNameInputs[index].defaultValue) {
      label.textContent = candidateNameInputs[index].value;
    }
  });
}

如何添加验证以便用户只能使用字符串，并且它具有20个字符的特定字符限制？我试图添加你的一个人的建议，但我想我做错了因为它不起作用。

Answer 1

您可能想要使用

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

请参见此处：http://jsfiddle.net/jzqp70oq/

Answer 2

希望这是你所期待的。

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 !")
}

Try this

Answer 3

以下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;
        }
    });
}

function EnterCandidates() {
  var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]');

  Array.prototype.forEach.call(names, function(label, index) {
    if (candidateNameInputs[index].value !== candidateNameInputs[index].defaultValue) {
      label.textContent = candidateNameInputs[index].value;
    }
  });
}

label::before {
  content: "\A";
 white-space: pre;
}
label::after {
  content: ': ';
}
label,
input {
  box-sizing: border-box;
  line-height: 1.4em;
  height: 1.4em;
  margin-bottom: 0.2em;
}
input[type=button]:last-child {
  display: block;
}

<form class="simple-form">
  <fieldset>
    <legend>Enter your candidate <b>names</b> in the boxes below:</legend>
    <label for="C1">Candidate 1</label>
    <input type="text" name="C1" id="C1" class="InputBox" />
    <label for="C2">Candidate 2</label>
    <input type="text" name="C2" id="C2" class="InputBox" />
    <label for="C3">Candidate 3</label>
    <input type="text" name="C3" id="C3" class="InputBox" />
    <label for="C4">Candidate 4</label>
    <input type="text" name="C4" id="C4" class="InputBox" />
    <label for="C5">Candidate 5</label>
    <input type="text" name="C5" id="C5" class="InputBox" />
    <input type="button" onclick="EnterCandidates()" value="Enter Candidates" />
  </fieldset>
  <fieldset>
    <legend>Enter the candidates <b>votes</b> in the boxes below:</legend>
    <label for="V1" id="L_V1">Name 1</label>
    <input type="text" name="V1" id="I_V1" class="InputBox" />
    <label for="V2" id="L_V2">Name 2</label>
    <input type="text" name="V2" id="I_V2" class="InputBox" />
    <label for="V3" id="L_V3">Name 3</label>
    <input type="text" name="V3" id="I_V3" class="InputBox" />
    <label for="V4" id="L_V4">Name 4</label>
    <input type="text" name="V4" id="I_V4" class="InputBox" />
    <label for="V5" id="L_V5">Name 5</label>
    <input type="text" name="V5" id="I_V5" class="InputBox" />
    <input type="button" value="Enter Votes" />
  </fieldset>
</form>

What's new in Swift 2，用于实验和开发。

请注意我也编辑了你的HTML结构，试着让它的结构更加语义化;删除了<br>个节点，并切换到CSS以将元素分解为新行;使用<legend>元素来保存每个部分的“说明”（删除最初使用的<div>元素）。此外，我使用<fieldset>元素将关联元素组合在一起，将<label>和<input>组合在一起，以及相关的“控制”按钮。

此外，由于更轻松地更新文本而不必添加“表示”字符串（冒号），因此我使用CSS来实现这一目的，以便在不使用搜索/替换的情况下轻松更新演示文稿 - 不可避免地 - 设计发生了变化。

关于问题的更新，以及评论中留下的问题：

有没有办法为此添加验证，以便用户只能使用字母表中的字母。还有一个字符限制，以便用户只能输入＆lt; 20个字符？如何在此代码中实现它？如果有答案，我会编辑我的帖子。

答案当然是“是”，这样做我建议采用以下方法：

function EnterCandidates() {
    var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
        names = document.querySelectorAll('label[for^=V][id^=L_V]'),

        // A regular expression literal; which means:
        // the complete string, from the start (^)
        // to the end ($) must comprise of characters
        // a-z (inclusive), apostrophe (') and white-space
        // (to allow O'Neill, for example); this must be
        // zero to 20 characters in length ({0,20}) and
        // is case-insensitive (i):
        validity = /^[a-z'\s]{0,20}$/i,

        // two empty/uninitialised variables for use within
        // the forEach() loop:
        tempNode, tempVal;

    Array.prototype.forEach.call(names, function (label, index) {

        // caching the candidateNameInputs[index] Node:
        tempNode = candidateNameInputs[index];

        // caching the value of that Node:
        tempVal = tempNode.value;

        // if the value of the Node is not equal to the default-value
        // of the Node, AND the value of the Node matches the regular
        // expression (returns true if so, false if not):
        if (tempVal !== tempNode.defaultValue && validity.test(tempVal)) {

            // we remove the 'invalid' class from the Node if
            // it's present:
            tempNode.classList.remove('invalid');

            // update the text of the <label>:
            label.textContent = tempVal;

        // otherwise, if the value does not match (!) the
        // the regular expression:
        } else if (!validity.test(tempVal)) {

            // we add the 'invalid' class-name to the
            // Node:
            tempNode.classList.add('invalid');

            // and set the text of the <label> to
            // its original state, by concatenating
            // the string "Name " with the result of the
            // current (zero-based) index of the <label>
            // after adding 1 (to make it one-based):
            label.textContent = 'Name ' + (index + 1);

        // otherwise, if the value is equal to the default-value
        // we do nothing other than remove the 'invalid'
        // class-name from the <input> Node:
        } else if (tempVal === tempNode.defaultValue) {
            tempNode.classList.remove('invalid');
        }
    });
}

function EnterCandidates() {
  var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]'),
    validity = /^[a-z'\s]{0,20}$/i,
    tempNode, tempVal;

  Array.prototype.forEach.call(names, function(label, index) {
    tempNode = candidateNameInputs[index];
    tempVal = tempNode.value;

    if (tempVal !== tempNode.defaultValue && validity.test(tempVal)) {
      tempNode.classList.remove('invalid');
      label.textContent = tempVal;
    } else if (!validity.test(tempVal)) {
      tempNode.classList.add('invalid');
      label.textContent = 'Name ' + (index + 1);
    } else if (tempVal === tempNode.defaultValue) {
      tempNode.classList.remove('invalid');
    }

  });
}

label::before {
  content: "\A";
 white-space: pre;
}
label::after {
  content: ': ';
}
label,
input {
  box-sizing: border-box;
  line-height: 1.4em;
  height: 1.4em;
  margin-bottom: 0.2em;
}
input[type=button]:last-child {
  display: block;
}
input.invalid {
  border-color: #f00;
}

<form class="simple-form">
  <fieldset>
    <legend>Enter your candidate <b>names</b> in the boxes below:</legend>
    <label for="C1">Candidate 1</label>
    <input type="text" name="C1" id="C1" class="InputBox" />
    <label for="C2">Candidate 2</label>
    <input type="text" name="C2" id="C2" class="InputBox" />
    <label for="C3">Candidate 3</label>
    <input type="text" name="C3" id="C3" class="InputBox" />
    <label for="C4">Candidate 4</label>
    <input type="text" name="C4" id="C4" class="InputBox" />
    <label for="C5">Candidate 5</label>
    <input type="text" name="C5" id="C5" class="InputBox" />
    <input type="button" onclick="EnterCandidates()" value="Enter Candidates" />
  </fieldset>
  <fieldset>
    <legend>Enter the candidates <b>votes</b> in the boxes below:</legend>
    <label for="V1" id="L_V1">Name 1</label>
    <input type="text" name="V1" id="I_V1" class="InputBox" />
    <label for="V2" id="L_V2">Name 2</label>
    <input type="text" name="V2" id="I_V2" class="InputBox" />
    <label for="V3" id="L_V3">Name 3</label>
    <input type="text" name="V3" id="I_V3" class="InputBox" />
    <label for="V4" id="L_V4">Name 4</label>
    <input type="text" name="V4" id="I_V4" class="InputBox" />
    <label for="V5" id="L_V5">Name 5</label>
    <input type="text" name="V5" id="I_V5" class="InputBox" />
    <input type="button" value="Enter Votes" />
  </fieldset>
</form>

JS Fiddle demo，用于实验和开发。

参考文献：

CSS：
- JS Fiddle demo。
- ::after pseudo-element。
- ::before pseudo-element。
HTML：
- content property
- <fieldset>。
- <label>。
JavaScript的：
- <legend>。
- Array.prototype.forEach()。
- Element.classList。
- Function.prototype.call()。
- HTMLFieldSetElement。
- HTMLLabelElement。
- HTMLLegendElement。
- JavaScript Regular Expressions Guide。
- Node.textContent。

Answer 4

<head>
<script type="text/javascript">
function test(){document.getElementById('Label_ID').innerHTML=document.getElementById('Input_ID').value;
}
</script>
</head>
//....
<input type="button" onClick="EnterCandidates();" value="Enter Candidates" />
//...

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

4 个答案: