Javascript-如何使用數組中的元素設置按鈕的值？

Question

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

這是上面的一個小例子，但是我基本上是在做一個屏幕鍵盤，並且我已經有了定位按鈕的循環，但是在循環中，我嘗試分配與上述代碼類似的每個鍵的值，而不是打印每個鍵的qwerty，它為每個按鈕打印key [row] [col]。 如何使用與上述類似的方法使字母顯示在按鈕上？

Answer 1

下面的代碼生成您期望的鍵盤布局：

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

在此處輸入圖片說明

第二行和第三行唯一需要向右移動一點，以使其看起來像真正的鍵盤。 為此，我們可以對div標簽進行填充。 希望這對您有所幫助。

Answer 2

像這樣嗎

HTML：

<input id="myInput" type="button" />

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];

這是基本思想。 您已經有一個循環可以使用。 javascript應該在頁面上的HTML 之后。 您的元素必須存在，然后才能抓住它們。 但是，不確定這是否是您的確切困惑。

您可以使用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);

如果想讓用戶即時選擇其他布局，將其包裝在函數中還可以使您以不同的鍵盤布局重復使用代碼。

Answer 3

您將需要以編程方式而不是在value屬性中進行設置。

您還需要以編程方式在循環內創建tr / td / input元素，例如：

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

以編程方式創建輸入標簽時，可以使用javascript設置value屬性-例如。

newInput.setAttribute("value", key[rowIndex, cellindex]);

Javascript-如何使用數組中的元素設置按鈕的值？

問題描述

3 個解決方案

解決方案1
3 已采納 2013-11-19 00:46:53

解決方案2
1 2013-11-19 00:45:12

解決方案3
0 2013-11-19 00:41:17

Javascript-如何使用數組中的元素設置按鈕的值？

問題描述

3 個解決方案

解決方案1 3 已采納 2013-11-19 00:46:53

解決方案2 1 2013-11-19 00:45:12

解決方案3 0 2013-11-19 00:41:17

解決方案1
3 已采納 2013-11-19 00:46:53

解決方案2
1 2013-11-19 00:45:12

解決方案3
0 2013-11-19 00:41:17