const query = query => { return document.querySelector(query); }; var output = "", textCase = "low"; window.onload = () => { construct(); }; const construct = () => { if(textCase === "low"){ query("table").innerHTML = ""; for (let row = 0; row < 7; row++){ if(row > 3 && row < 7){ continue; } $("table").append(""); for (let key in rows[row]){ $("table").append(` ${rows[row][key]} `); } } textCase = "high"; } else{ query("table").innerHTML = ""; for (let row = 0; row < 7; row++){ if(row > 0 && row < 4){ continue; } $("table").append(""); for (let key in rows[row]){ $("table").append(` ${rows[row][key]} `); } } textCase = "low"; } $("table").append('. ,'); $(".key").on("click",event=>{click(event)}); }; const click = event => { key = event.target.id; if(key === undefined){return} console.log(key) output = "Hello"; switch (key){ case "←": query("#text").innerHTML = query("#text").innerHTML.slice(0, -1); break; case "↵": output = "
"; break; case "^": construct(); break; default: output = key; } $("#text").innerHTML += output; }; const rows = [ ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], ["A", "S", "D", "F", "G", "H", "J", "K", "L", "←"], ["^", "Z", "X", "C", "V", "B", "N", "M", "?", "↵"], ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"], ["a", "s", "d", "f", "g", "h", "j", "k", "l", "←"], ["^", "z", "x", "c", "v", "b", "n", "m", "?", "↵"], ["", "", ",", " ", " ", " ", " ", ".", "", ""] ];

Keyboard