[英]Splitting dynamically created buttons into rows Javascript/HTML
I am trying to create a virtual keyboard from scratch. 我正在尝试从头开始创建虚拟键盘。 So far I have a function that creates a button based on a character it's been given: 到目前为止,我有一个函数可以根据给定的字符创建按钮:
function keyButton(char) { //makes a button out of a string/char
var btn = document.createElement("button"); //create button
btn.innerText = char; //fill it with char
btn.onclick = function () { keyStroke(this); };
return btn;
}
The second part of my code splits a typical qwerty setup and creates a button with each individual letter: 我的代码的第二部分拆分了一个典型的qwerty设置,并使用每个字母创建一个按钮:
var keyList = "QWERTYUIOPASDFGHJKLZXCVBNM";
for (i in keyList) //loops through qwerty keyboard and uses keyButton
{
var button = keyButton(keyList[i]);
if (i < 11)
//give that an element which identifies it as first row
//document.body.appendChild(button)
else if (i < 20)
//give that an element which identifies it as second row
else {
//give that an element which identifies it as third row
}
I am trying to make it so that buttons aren't all one next to another but rather separated in columns of 10 keys, then 9 keys, then 7 keys. 我试图做到这一点,以使按钮不是一个接一个,而是分成10个键,然后是9个键,然后是7个键的列。 I don't know where to start to achieve this. 我不知道从哪里开始实现这一目标。 Thanks fo the help! 谢谢您的帮助!
function keyButton(char, num) { var btn = document.createElement("button"); btn.innerText = char; btn.onclick = function () { keyStroke(this); }; btn.dataset.num = num; if(num == 10 || num == 19) { btn.className = 'break'; } keyboard.appendChild(btn); return btn; } var keyList = "QWERTYUIOPASDFGHJKLZXCVBNM"; var keyboard = document.getElementById('keyboard'); for (i in keyList) //loops through qwerty keyboard and usesn { keyButton(keyList[i], i); }
button { float: left; display: block; } button.break { clear: left; }
<div id="keyboard"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.