Имею вот такой код виртуальной клавиатуры, не как не могу написать скрипт так что бы при нажатии на кнопку(класс key) её содержимое выводилась на экран, это div с классом display. В теории есть понимание что нужно использовать querySelectorAll, цикл for of, и textContent. Но что то не как не соображу как это всё между собой подружить.
<h1 class="visually-hidden">Виртуальная клавиатура</h1>
<section class="computer">
<div class="display-wrapper">
<div class="display"></div>
</div>
<button class="button clear" type="button">Очистить</button>
</section>
<section class="keyboard">
<div class="keyboard-line">
<button class="button key" type="button" id="index_0">й</button>
<button class="button key" type="button" id="index_1">ц</button>
<button class="button key" type="button" id="index_2">у</button>
<button class="button key" type="button" id="index_3">к</button>
<button class="button key" type="button" id="index_4">е</button>
<button class="button key" type="button" id="index_5">н</button>
<button class="button key" type="button" id="index_6">г</button>
<button class="button key" type="button" id="index_7">ш</button>
<button class="button key" type="button" id="index_8">щ</button>
<button class="button key" type="button" id="index_9">з</button>
<button class="button key" type="button" id="index_10">х</button>
<button class="button key" type="button" id="index_11">ъ</button>
</div>
<div class="keyboard-line">
<button class="button key space" type="button" id="index_33"> </button>
</div>
</section>