Javascript - 如何使用数组中的元素设置按钮的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20060915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - How do you set the value of a button with an element from an array?
提问by jellybean_232
<html>
<body>
<script type="text/javascript">
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
</script>
<table>
<tr>
<td><input type = 'button' value = "key[0][1]" /></td>;
</tr>
</table>
</body>
</html>
This is a small example above, but I'm basically making an onscreen keyboard and I already have the loop which positions the buttons, however in my loop I try to assign the value of each key similarly to the code above, but instead of printing q w e r t y for each key, it prints key[row][col] for each button. How do I get the letters to appear on the button using a similar method to the above?
这是上面的一个小例子，但我基本上是在制作一个屏幕键盘，我已经有了定位按钮的循环，但是在我的循环中，我尝试类似于上面的代码分配每个键的值，但不是打印每个键的 qwerty，它为每个按钮打印 key[row][col]。如何使用与上述类似的方法让字母出现在按钮上？
回答by Santhosh Gutta
The below code generates the keyboard kind of layout that you are expecting:
以下代码生成您期望的键盘布局：
<html>
<head>
<script type="text/javascript">
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
</script>
<body>
<script type="text/javascript">
for(var i = 0; i < key.length; i++)
{
document.write("<div>");
for(var j = 0; j < key[i].length; j++)
{
document.write("<input type='button' value='" + key[i][j] + "'/>");
}
document.write("</div>");
}
</script>
</body>
</html>
The only thing the second and third row should move right a little bit to look like real keyboard. For this we can do padding for the div tags. Hope this helps you.
第二行和第三行唯一应该向右移动一点以看起来像真正的键盘。为此，我们可以对 div 标签进行填充。希望这对你有帮助。
回答by wulftone
Something like this?
像这样的东西？
HTML:
HTML：
<input id="myInput" type="button" />
JavaScript:
JavaScript：
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
var input = document.getElementById('myInput');
input.value = key[0][1];
That's the basic idea. You already have a loop to work with. The javascript should be afterthe HTML on the page. Your elements need to exist before you can grab them. Not sure if this is your precise confusion, though.
这就是基本的想法。您已经有一个循环可以使用。javascript 应该在页面上的 HTML之后。您的元素需要存在才能抓取它们。不过，不确定这是否是您的确切混淆。
You can use javascript to create the elements, but unless there's a reason to do so, you might as well write HTML. If you're using a javascript function to generate the elements as well as fill their values in, you'll need javascript's document.createElement:
您可以使用 javascript 来创建元素，但除非有理由这样做，否则您最好编写 HTML。如果您使用 javascript 函数来生成元素并填充它们的值，您将需要 javascript 的document.createElement：
var keysArr = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
var generateKeys = function(keys) {
for (var i = 0 ; i < keys.length ; i++) {
for (var j = 0 ; j < keys[i].length ; j++) {
var input = document.createElement('input');
input.value = key[i][j];
document.appendChild(input); // or put it wherever you need to.
}
}
}
generateKeys(keysArr);
Wrapping it in a function will also allow you to re-use the code with different keyboard layouts if you wanted to, say, let the user choose a different layout on the fly.
如果您想让用户即时选择不同的布局，将它包装在一个函数中还可以让您重新使用具有不同键盘布局的代码。
回答by Brendan Hill
You will need to set them programmatically, rather than in the value attribute.
您需要以编程方式设置它们，而不是在 value 属性中。
You will also need to create the tr/td/input elements within your loop programmatically, for example:
您还需要以编程方式在循环中创建 tr/td/input 元素，例如：
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
When you create the input tag programmatically, you can set the value attribute using javascript - eg.
当您以编程方式创建输入标签时，您可以使用 javascript 设置 value 属性 - 例如。
newInput.setAttribute("value", key[rowIndex, cellindex]);
