Skip to content

virtual keyboard in JS but with images

I want to make a virtual keyboard in HTML, CSS, and JavaScript. However, there is a twist. Instead of the letters on the keyboard, I would like to replace them with images of my own choice. So lets say,

instead of letter "a", i have an image of APPLE
instead of letter "s", I have an image of SNAKE

Was able to do it.



is this what you had in mind?

var elements = document.getElementsByClassName("key");

var myFunction = function(event) {
let text = document.getElementById('text')
text.innerText = text.innerText +

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);

border:solid 2px green;
<div class='keyboard'>
<img src="" id='a' class='key'> 
<img src="" id='b' class='key'> 
<img src="" id='c' class='key'> 
<img src="" id='d' class='key'> 
<img src="" id='e' class='key'> 
<img src="" id='f' class='key'> 
<img src="" id='g' class='key'> 
<div class='keyboard'>
<img src="" id='h' class='key'> 
<img src="" id='i' class='key'> 
<img src="" id='j' class='key'> 
<img src="" id='k' class='key'> 
<img src="" id='l' class='key'> 
<img src="" id='m' class='key'> 
<img src="" id='n' class='key'> 

<div id='text'>

User contributions licensed under: CC BY-SA
5 People found this is helpful