Как отобразить HTML из поля ввода - PullRequest
Новая
       14

Как отобразить HTML из поля ввода

0 голосов
/ 01 октября 2019

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

Здесь я просто заставляю пользователя вставить текст в поле, затем я попытался "проанализировать" значение ввода, присвоив ему переменнуюимя со значением в коде, чтобы его можно было добавить как свойство к объекту "libs". У меня есть еще кое-что к сообщению, но я не могу даже правильно обработать это одно предложение. 

<!DOCTYPE html>
<html>
    <head>
        <title>Madder Libs</title>
    </head>
    <body>

    <div id="input">

        <form>  
            <p>
                <h4>Piece of clothing:</h4><input id="cloth" type="text" value=" " />
            </p>
        </form>
    </div>

        <script>
            let clothes = document.getElementById('cloth').value;
            let libs = {
                a: clothes,
                /*b: firstBodyPart,
                c: secondBodyPart,
                d: verbOne,
                e: thirdBodyPart,
                f: verbTwo,
                g: firstNoun,
                h: secondNoun,
                i: verbThree,*/
                };

            let showThis = function()
            {
                let display = function(message)
                {
                    let sayThis = `I wear a ${message.a} on sundays.`;
                    return sayThis;
                }

                document.getElementById('madlibs').innerHTML += "<br/>" + display(libs);
            }

        </script>

    <div id="madlibs">

        <button type="submit" onclick="showThis()">Show Message</button>
    </div>

    </body>
</html>

Я хочу, чтобы мое сообщение отображалось, включая все, что пользователь вставил в текстовое поле

1 Ответ

0 голосов
/ 01 октября 2019

Давайте начнем с рассмотрения, почему ваше предложение не работает. Это просто вопрос времени или, другими словами, когда все исполняется. В вашем коде (который не очень хорошо структурирован, но об этом позже) вы выполняете

let clothes = document.getElementById('cloth').value;

в самом начале скрипта. В этом случае вы не получаете какую-либо форму ссылки, которая позволила бы вам прочитать значение на более позднем этапе, но фактическое значение в то время. Поскольку ваше поле input имеет атрибут value, установленный на пустую строку, это все, что вы когда-либо получите, независимо от того, сколько раз вы выполните функцию позже.

Чтобы получить значение для ввода наВо время вызова вашего метода вам придется переместить его в саму функцию .

Но, как я уже упоминал ранее, ваш код в целом плохо структурирован, поэтому позвольте мне дать несколько предложений.

  1. button типа submit по умолчанию выполняет отправку формы, если она помещена в форму;Вы не пользуетесь этим (это дает преимущества, такие как возможность отправить форму с помощью клавиши «Ввод», например,

  2. размещение <script> в середине документа - плохой выбор, поскольку он блокируетрендеринг остальной части документа. Наилучшие варианты - поместить его в пределах <head> при использовании с атрибутом defer или в конце документа непосредственно перед закрытием тега </body>.

  3. Вложение вашей функции друг в друга здесь не имеет смысла. Вы можете легко определить их независимо и вызывать одно в другом, если необходимо.

  4. заголовочный элемент <h4> не может появляться внутри <p> tag

Пример 

<!DOCTYPE html>
<html>
<head>
    <title>Madder Libs</title>
</head>
<body>
    <form action="/" onsubmit="return showThis()">
      <div>
        <label for="cloth">Piece of clothing:</label>
        <input id="cloth" type="text" value="" />
      </div>
      <div id="madlibs"></div>
      <div>
        <button type="submit">Show Message</button>
      </div>
    </form>

    <script>
      // let's get references to our elements, so we don't have to
      // do it multiple times
      let clothes = document.getElementById('cloth');
      let madlibs = document.getElementById('madlibs');

      // let's define our functions
      function display(message) {
        let sayThis = `I wear a ${message.a} on sundays.`;
        return sayThis;
      }

      function showThis() {
        const clothesValue = clothes.value;
        let libs = {
            a: clothesValue,
            /*b: firstBodyPart,
            c: secondBodyPart,
            d: verbOne,
            e: thirdBodyPart,
            f: verbTwo,
            g: firstNoun,
            h: secondNoun,
            i: verbThree,*/
        };
        madlibs.innerHTML += "<br/>" + display(libs);
        return false;
      }
    </script>
</body>

...