0 
<html>
<head>
    <script type = "text/javascript">
        var fst_row = ["q","w","e","r","t","y","u","i","o","p"];
        var snd_row = ["a","s","d","f","g","h","j","k","l"];
        var thd_row = ["z","x","c","v","b","n","m"];

        function insert_fst_row(){
            document.getElementById("my_key").innerHTML = keyboard(snd_row);  
        } //inserts first row of letters of the keyboard when user clicks button.

        function keyboard(array){
            var key = "";
            key += "<table>";
            for (var row = 1; row = 1; row++){
                key +=      "<tr>";
                for (var col = 1; col <= array.length; col++){
                    key +=      "<td><input type = 'button' value = 'array[i]'/></td>"; ** //Error here.
                    }
                key +=      "</tr>";
                }

            key += "</table>";
            return key;
        }

    </script>
</head>

<body>
    <input type = "text" name = "text" id = "text"/>
    <input type = "button" value = "insert key" onclick = "insert_fst_row()"/>
    <p id = "my_key"></p>
</body>

我正在尝试使用循环制作屏幕键盘，因此我将每行字母放在一个单独的数组中。但是，当我单击按钮时，我无法使键盘出现。相反，当它运行时，它会打印出一条错误消息，指出“分配大小溢出”，它指的是代码中用 ** 指示的行。这是什么意思，如何解决？

4

2 回答 2

5

问题在这里：

// ---------------vvvvvvv
for (var row = 1; row = 1; row++) {

在每个循环迭代row = 1将始终为非假（即1），因此您的循环将永远不会停止执行。这个无限循环导致堆栈内存溢出。在一般情况下，循环的第二部分for带有一个将停止迭代的子句，例如row < number_of_rows.

于 2013-11-18T19:57:00.527 回答
0

我会做这样的事情。

以下代码不使用table带有硬编码事件侦听器的刚性元素或静态 html。它还接受任意数量的键盘行，每行带有任意数量的键。

此代码旨在帮助解决您的一些问题，并为您提供一些想法以自行改进。

当您单击键以查看输出时，请注意控制台。

jsfiddle 演示在这里

var Keyboard = function(elem) {
  this.elem = elem;
  this.elem.className = "keyboard";

  Keyboard.rows.map(function(row) {
    this.elem.appendChild(this.createRow(row));
  }.bind(this));
};

Keyboard.rows = [
  ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "delete"],
  ["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
  ["caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "return"],
  ["shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "shift"],
];

Keyboard.prototype.createRow = function(row) {
  var div = document.createElement("div");

  row.map(function(key) {
    div.appendChild(this.createKey(key));
  }.bind(this));

  return div;
};

Keyboard.prototype.createKey = function(key) {
  var button = document.createElement("button");
  button.innerHTML = key;
  button.addEventListener("click", this.onKeypress.bind(this, key));
  return button;
};

Keyboard.prototype.onKeypress = function(key, event) {
  var keypressEvent = new Event("keypress");
  keypressEvent.key = key;
  this.elem.dispatchEvent(keypressEvent);
  event.preventDefault();
};

用法

var div = document.getElementsByTagName("div")[0];
new Keyboard(div);

div.addEventListener("keypress", function(event) {
  console.log(event.key + " was pressed", event);
});
于 2013-11-18T20:17:55.010 回答