[英]Splitting dynamically created buttons into rows Javascript/HTML
我正在嘗試從頭開始創建虛擬鍵盤。 到目前為止,我有一個函數可以根據給定的字符創建按鈕:
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;
}
我的代碼的第二部分拆分了一個典型的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
}
我試圖做到這一點,以使按鈕不是一個接一個,而是分成10個鍵,然后是9個鍵,然后是7個鍵的列。 我不知道從哪里開始實現這一目標。 謝謝您的幫助!
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.