logo标签列表

如何将JavaScript变量赋值给输入文本字段？

javascriptdom
4

我在JavaScript中有一个名为“numbers”的变量，这个变量包含从0到9的10个数字，如下所示。

var numbers = "0123456789";

现在我想要做的是使用document.getElementByID("a") = "";将这些数字分配给输入文本字段，例如：
<input type="text" id="a" value="" />
<input type="text" id="b" value="" />
<input type="text" id="c" value="" />
<input type="text" id="d" value="" />
<input type="text" id="e" value="" />
<input type="text" id="f" value="" />
<input type="text" id="g" value="" />
<input type="text" id="h" value="" />
<input type="text" id="i" value="" />
<input type="text" id="j" value="" />

目前上面的文本字段没有任何值，但我希望能将变量“numbers”中的每个数字分配给上面的每个文本字段，这样当用户单击名为“click me”的按钮时，它会看起来像这样。

<input type="text" id="a" value="0" />
<input type="text" id="b" value="1" />
<input type="text" id="c" value="2" />
<input type="text" id="d" value="3" />
<input type="text" id="e" value="4" />
<input type="text" id="f" value="5" />
<input type="text" id="g" value="6" />
<input type="text" id="h" value="7" />
<input type="text" id="i" value="8" />
<input type="text" id="j" value="9" />

如果特定数字= 0，那么是否有任何方法可以将文本字段保留为空？

提前致谢:)

2
你可以使用 numbers[2] 来获取字符串中的一个数字（例如获取第三个字符“2”），因此你可以尝试一些类似于 if(numbers[2] != 0) document.getElementById('c').value = numbers[2] 的代码。 - pimvdb
3个回答
8
var numbers = "0123456789";
var ids = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];

for (var i = 0; i < ids.length; i++)
{
    var el = document.getElementById(ids[i]);
    var num = numbers[i];

    if (num == "0")
        el.value = "";
    else
        el.value = num;
}

示例代码： http://jsfiddle.net/LrJ5S/。

2
此代码依赖于数字和ID具有相同的长度。您应该通过使用 numbers[i % ids.length] 来获取数字。 - mylopeda
2
@esrange：我在OP的帖子中没有看到有更多的元素而不是数字的迹象...为什么要通过假定的要求使解决方案变得过于复杂呢？ - mellamokb
这对我需要的工作完美地运行了，但我也会查看其他解决方案！非常感谢你！ - ZAD
嗨，当我访问你提供的链接时它可以工作，但是当我将它保存到我的电脑上时，输入字段就无法工作了...你有任何想法为什么会发生这种情况吗？谢谢。 - ZAD
1
@Farzad：看起来它设置了依赖MooTools库。尝试此版本，http://fiddle.jshell.net/LrJ5S/3/show/，查看源代码，并将该源代码复制到您的本地PC。它应该可以工作。 - mellamokb
2
除了使用mellamokb之外，还有另一种实现相同目的的方法：
var numbers = "abc0123abc0123";
var inputs = document.getElementsByTagName('input');
var i = 0;
for(var s = 0; s < inputs.length; s++) {
    inputs[s].value = numbers.charAt(i)!=0?numbers.charAt(i):'';
    i++;
}

JSFiddle

谢谢大家提供的所有有用的答案！哇！：）） - ZAD
嗨，感谢您的帮助！非常感激您的帮助！您能否请解释一下 "for() {} 语句" ... 特别是代码行 "inputs[s].value = numbers.charAt(i)!=0?numbers.charAt(i):''; i++;" 在 "for 语句" 中的作用... 谢谢 :) - ZAD
1

基本示例，没有对输入数据大小和字符串进行检查：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title></title>
  </head>
  <body>
    <div id="myInputs">
      <input type="text" id="a" value="" />
      <input type="text" id="b" value="" />
      <input type="text" id="c" value="" />
      <input type="text" id="d" value="" />
      <input type="text" id="e" value="" />
      <input type="text" id="f" value="" />
      <input type="text" id="g" value="" />
      <input type="text" id="h" value="" />
      <input type="text" id="i" value="" />
      <input type="text" id="j" value="" />      
    </div>
    <button id="run">Run</button>

    <script type="text/javascript">
        function putNumbers(){
           var numbers = "0123456789";
           var inputs = document.getElementById("myInputs").getElementsByTagName("input");
           for(var i=0;i<inputs.length;i++){
             var val = numbers.charAt(i);
             inputs[i].value = val==="0"?"":val;
           }  

        }

        document.getElementById("run").onclick = putNumbers;
    </script>


  </body>
</html>

工作示例

嗨，感谢您的帮助！非常感激您的帮助！ :) 您能否请解释一下 "for() {} 语句" ... 请，我有兴趣学习而不是复制和粘贴！提前致谢 :) - ZAD
特别是for(){}语句中的这一行代码 -> "inputs[i].value = val==="0"?"":val;"... 谢谢 :) - ZAD
三元运算符 | charAt | getElementsByTagName 的文档。 - epascarello
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接