Virtual Keyboard JavaScript

gistfile1.js

var textarea = document.getElementById("textarea");
    
    var row_1 = document.getElementById("row_1").getElementsByTagName("th");
    var row_2 = document.getElementById("row_2").getElementsByTagName("td");
    var row_3 = document.getElementById("row_3").getElementsByTagName("td");
    var row_4 = document.getElementById("row_4").getElementsByTagName("td");
    var row_5 = document.getElementById("row_5").getElementsByTagName("td");
    var row_6 = document.getElementById("row_6").getElementsByTagName("td");
    
    var keys_1 = ["`", "-", "=", "[", "]", ";", "'", ",", ".", "/", "\\"];  // 11 keys
    var keys_2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];        // 10 keys
    var keys_3 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];        // 10 keys
    var keys_4 = ["a", "s", "d", "f", "g", "h", "j", "k", "l"];             // 9 keys
    var keys_5 = ["z", "x", "c", "v", "b", "n", "m"];                       // 7 keys
    var keys_6 = ["Shft", " ", "Bksp", "Entr", "Clr"];                      // 5 keys
    
    var sfth_keys_1 = ["~", "_", "+", "{", "}", ":", "\"", "<", ">", "?", "|"];  // 11 keys
    var sfth_keys_2 = ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"];             // 10 keys
    
    var shifted = false;
    
    function writeChar() {
        textarea.value += this.innerHTML;
    }
(function assig() {
    //  first row (signs)
    for (var i = 0; i <= 10; i++) {
        if (shifted) {
            row_1[i].innerHTML = sfth_keys_1[i];
        } else {
            row_1[i].innerHTML = keys_1[i];
        }
        row_1[i].onclick = writeChar;    
    }
    //  second row (numbers)     
    for (var i = 0; i <= 9; i++) {
        if (shifted) {
            row_2[i].innerHTML = sfth_keys_2[i]; 
        } else {
            row_2[i].innerHTML = keys_2[i];
        }
        row_2[i].onclick = writeChar;
    }
    // third row (alpha1)
    for (var i = 0; i <= 9; i++) {
        if (shifted) {
            row_3[i].innerHTML = keys_3[i].toUpperCase();
        } else {
             row_3[i].innerHTML = keys_3[i];
        } 
        row_3[i].onclick = writeChar;
    }
    // fourth row (alpha2)
     for (var i = 0; i <= 8; i++) {
        if (shifted) { 
            row_4[i].innerHTML = keys_4[i].toUpperCase();
        } else {
            row_4[i].innerHTML = keys_4[i];
        } 
        row_4[i].onclick = writeChar;
     }
     // fifth row (alpha3)
     for (var i = 0; i <= 6; i++) {
        if (shifted) { 
            row_5[i].innerHTML = keys_5[i].toUpperCase();
        } else {
            row_5[i].innerHTML = keys_5[i];
        }
        row_5[i].onclick = writeChar;
     }
     // sixth row (options)
     for (var i = 0; i <= 4; i++) {
        row_6[i].innerHTML = keys_6[i]; // 5 keys
        row_6[0].onclick = function() {
            if (shifted) {
                shifted = false;
                console.log("Shift is off.");
                assig();
            } else {
                shifted = true;
                console.log("Shift is on.");
                assig();
            }
        }
	 }
            row_6[1].onclick = writeChar;
            row_6[2].onclick = function() {
                textarea.value = textarea.value.substr(0, textarea.value.length-1);
            }
            row_6[3].onclick = function() {
                textarea.value += "\n";
            }
            row_6[4].onclick = function() {
                textarea.value = "";
            }
    })();