Question

我正在创建一个Web应用程序，它可以通过将用户输入转换为文本字段到特定代码并显示与特定代码相对应的象形文字来编写埃及象形文字。

目前可用的代码是从A1到A6，例如A1A，A1B，A4C，A4E（我不知道这是否重要）。

这是我到目前为止所得到的：

<!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>

此代码目前正在运行，但并不完全符合我的要求，而且有了它，我有三个问题，我不知道如何解决：

这个脚本创建了HTML图像元素的实例，这些实例是空的，并且它分隔了逐步显示的图像，这是我不想要的。
当我不想要链接断开时显示图片错误图片。
当用户使用退格键删除文本字段中的代码时，它不会删除象形文字的图像。

有人能指出我正确的解决方案吗？

更新：我能够通过使用jQuery编码来解决上面提到的问题，这首先是我试图避免的 - 试图致力于JavaScript。

这是我的JavaScript / jQuery代码（改进）：

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();
            }  
        }

现在代码运行完美，但我认为它可以在某种程度上得到改进。有关其改进的任何意见吗？

用户输入显示图像 - 如何解决一些脚本问题？

0 个答案: