User input showing images - how to solve some of script problems?

问题

I am creating a web application which has a role to write Egyptian hieroglyphs by converting user input into the text field to the specific code and displaying hieroglyphs which correspond to specific code.

Currently available codes are from A1 to A6, with possibilities for example as A1A, A1B, A4C, A4E (I don't know if this is important).

This is what I got so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #hieroglyphs {
            padding: 10px;
        }

        #hieroglyphs img {
            height: 3rem;
            margin: 0 2.5px;
        }
    </style>
</head>
<body>
    <input id="userInput" name="userInput" type="text">
    <div id="hieroglyphs">
    </div>
    <script>
        document.getElementById("userInput").onkeyup = function(e){
            if(e.keyCode == 32 || e.keyCode == 13){
                var userInput = document.getElementById("userInput").value;
                var userInputSplit = userInput.split(" ");
                for (i = 0; i < userInputSplit.length; i++) {
                    var imageHiero = document.createElement("img");
                    imageHiero.id = "display" + [i];
                    document.getElementById("hieroglyphs").appendChild(imageHiero);
                    document.getElementById("display" + [i]).src = "./images/hieroglyphs/A/" + userInputSplit[i] + ".svg";
                    }
                }  
            }
    </script>
</body>
</html>

This code working for now, but not perfectly as I want, and with it, I have three problems which I don't know how to solve:

This script creating instances of HTML image element which are empty and by that it separating images which are shown progressively, which I don't want.
It shows picture error image when the link is broken which I don't want to.
It does not delete images of hieroglyphs when the user uses backspace to delete the code in the text field.

Can anyone point me to the right solution?

UPDATE: I was able to solve problems mentioned above by using jQuery coding, which in the first place I tried to avoid - tried to be devoted to JavaScript.

Here is my JavaScript / jQuery code (improved):

document.getElementById("userInput").onkeyup = function(e){
        if(e.keyCode == 32 || e.keyCode == 13 || e.keyCode == 8){
            var userInput = document.getElementById("userInput").value;
            var userInputSplit = userInput.split(" ");
            for (i = 0; i < userInputSplit.length; i++) {
                var imageHiero = document.createElement("img");
                imageHiero.id = "display" + [i];
                imageHiero.src = "";
             document.getElementById("hieroglyphs").appendChild(imageHiero);
                document.getElementById("display" + [i]).src = "./images/hieroglyphs/A/" + userInputSplit[i] + ".svg";
                }
            $("img[src='']").remove();
            $("img[src='./images/hieroglyphs/A/.svg']").remove();
            $("img[src='./images/hieroglyphs/A/A.svg']").remove();
            }  
        }

Now the code works perfectly, but I think that it could be in some way improved. Any opinions about its improvement?

来源：https://stackoverflow.com/questions/50200146/user-input-showing-images-how-to-solve-some-of-script-problems

标签

javascript

html

image

user-input

textfield