Как обратиться к элементу формы созданной с помощью document.createElement()?

Здраствуйте! Создаю виртуальную клавиатуру и для этого создал массив в котором есть все символы клавиатуры. Кнопки создаются без проблем. Проблема начинается когда я нажимаю на кнопку и хочу, чтобы её символ вписался в поле для ввода. Вот код:

function init(){
            for (var i = 0; i < ABC.length;i++){
                if ( i == 12 || i == 22){  //Создаю разделители, чтобы клавиатура выглядела натуральнее
                    var br = document.createElement('br');
                    document.body.append(br);
                }
                var letter = document.createElement('button', value = ABC[i]); 
                letter.innerHTML = ABC[i];
                letter.onclick = function() {
                    mainForm.result.value = "" + value; //Вот не знаю, как обратиться к кнопке, чтобы вывело её символ в поле для ввода
                };
                document.body.append(letter);
            }
        
        }

При данном коде при нажатии на кнопку мне выводит символ "Ю", т.к он последний в массиве. Я понимаю почему так происходит (Из-за того, что когда сработает обработчик событий в value находится символ "Ю"), но интересно, как получать другие символы?

P.S. На сайте уже в панеле элементов есть такие вот строчки, которые создаются после отработки цикла: <button is="к">к</button> может быть можно как-то обратиться в элменту is и получить с него символ?