Javascript：尝试构建带有循环的屏幕键盘，但我收到"allocated size overflow"消息

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

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

问题就在这里：

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

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

我会做这样的事情。

以下代码不使用刚性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);
});

相关内容

最新更新

热门标签：