Пользовательский ввод, показывающий изображения - как решить некоторые из проблем скрипта? - PullRequest
Новая
       25

Пользовательский ввод, показывающий изображения - как решить некоторые из проблем скрипта?

0 голосов
/ 06 мая 2018

Я создаю веб-приложение, которое играет роль в написании египетских иероглифов путем преобразования ввода пользователя в текстовое поле для конкретного кода и отображения иероглифов, соответствующих конкретному коду.

В настоящее время доступны коды от 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>

Этот код работает сейчас, но не совсем так, как я хочу, и с ним у меня есть три проблемы, которые я не знаю, как решить:

  1. Этот скрипт создает экземпляры HTML-элемента изображения, которые являются пустыми, и тем самым разделяет изображения, которые отображаются постепенно, что мне не нужно.
  2. Это показывает изображение ошибки изображения, когда ссылка не работает, что я не хочу.
  3. Не удаляет изображения иероглифов, когда пользователь использует клавишу возврата для удаления кода в текстовом поле.

Может кто-нибудь указать мне правильное решение?

UPDATE: Я смог решить проблемы, упомянутые выше, используя 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();
            }  
        }

Теперь код работает отлично, но я думаю, что он может быть каким-то образом улучшен. Есть мнения по поводу его улучшения?

...