Using A For Loop To Call An Image?

I am trying to use a for loop to call images of custom text. For example, I have images named uppera.png and lowera.png for a custom font. I need the image of the letter to show up as they type into a text area, but also have backspace work correctly to delete the last image added. Here is the code I have thus far:

<script type="text/javascript">
function callimage() {
var chars = document.getElementById('userinput').value.split("");[code]....

When I test this out it takes the previously entered text and adds it to the new text and combines them. For instance if you entered "a" it would show up as "a"; if you entered "a" again it would show up as "aaa" and then "aaaaaa" and so on. Also, it will add the existing characters again if any key is pressed, like just shift. I think I would need to write an else statement to fix that part, but I don't know what to put there, either.