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