Javascript:试图构建一个带有循环的屏幕键盘,但我得到了一个;“已分配大小溢出”;消息 变量fst_row=[“q”、“w”、“e”、“r”、“t”、“y”、“u”、“i”、“o”、“p”]; 变量snd_row=[“a”、“s”、“d”、“f”、“g”、“h”、“j”、“k”、“l”]; 变量thd_row=[“z”、“x”、“c”、“v”、“b”、“n”、“m”]; 函数插入\u fst\u行(){ document.getElementById(“my_key”).innerHTML=键盘(snd_行); }//当用户单击按钮时,插入键盘的第一行字母。 功能键盘(阵列){ var key=“”; 键+=”; 对于(变量行=1;行=1;行++){ 键+=”; 对于(var col=1;col

Javascript:试图构建一个带有循环的屏幕键盘,但我得到了一个;“已分配大小溢出”;消息 变量fst_row=[“q”、“w”、“e”、“r”、“t”、“y”、“u”、“i”、“o”、“p”]; 变量snd_row=[“a”、“s”、“d”、“f”、“g”、“h”、“j”、“k”、“l”]; 变量thd_row=[“z”、“x”、“c”、“v”、“b”、“n”、“m”]; 函数插入\u fst\u行(){ document.getElementById(“my_key”).innerHTML=键盘(snd_行); }//当用户单击按钮时,插入键盘的第一行字母。 功能键盘(阵列){ var key=“”; 键+=”; 对于(变量行=1;行=1;行++){ 键+=”; 对于(var col=1;col,javascript,html,loops,dhtml,on-screen-keyboard,Javascript,Html,Loops,Dhtml,On Screen Keyboard,而言,问题在于: <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

而言,问题在于:

<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>
在每次循环迭代中,
row=1
将始终为非false(即
1
),因此您的循环将永远不会停止执行。此无限循环会导致堆栈内存溢出。在通常情况下,
for
循环的第二部分包含一个将停止迭代的子句,例如,
行数
问题在于:

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

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

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

这段代码旨在帮助您解决一些问题,并为您提供一些自己改进的想法

当您单击按键以查看输出时,观察控制台

用法


我会这样做

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

这段代码旨在帮助您解决一些问题,并为您提供一些自己改进的想法

当您单击按键以查看输出时,观察控制台

用法

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);
});