Как сохранить пользовательский ввод как переменную с модальной диалоговой библиотекой?(JavaScript) - PullRequest
Новая
       22

Как сохранить пользовательский ввод как переменную с модальной диалоговой библиотекой?(JavaScript)

0 голосов
/ 14 апреля 2019

Я пытаюсь сохранить пользовательский ввод через оповещение как переменную. На самом деле я могу сделать это через JS, используя prompt , но не могу реализовать аналогичное решение с библиотеками sweetalert и sweetalert2 .

Я прочитал их документацию и примеры:

https://sweetalert.js.org/guides/#advanced-examples
https://sweetalert2.github.io/#input-types

Мои усилия возвращают [Обещание объекта] заполнитель вместо переменного текста в лучшем случае, но обычно он вообще не работает: https://codepen.io/dimos082/pen/xeXmqK

Вот реализация, которая работает для меня в JavaScript с всплывающими окнами оповещений: https://codepen.io/dimos082/pen/ROLEpo

<html>
<body>
    <button onclick="TellTale()">Tell me a story</button>
    <p id="Tale"></p>  <!-- Result from TellTale() will be put here as innerHTML-->  
</body>
<script> 
    function TellTale() {let KnightName = prompt("How do people call you, oh Noble Knight?");
    document.getElementById("Tale").innerHTML = "Once upon a time, there lived a champion, noble Sir " + KnightName + "."}
</script>
</html>

Я ищу ту же обработку переменных, что и в коде выше. Возможно ли с этими двумя библиотеками, или вы можете предложить лучшее решение для замены стандартных предупреждений?

Спасибо!

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Решение этой проблемы: 

<head>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    </head>
<html>
<body>
    <button onclick="TellTale()">Tell me a story</button>
    <p id="Tale"></p>  <!-- Result from TellTale() will be put here as innerHTML-->  
</body>
<script> 
function TellTale() {
 swal("How do people call you, oh Noble Knight?", {
   content: "input"
 }).then(KnightName => document.getElementById("Tale").innerHTML = "Once upon a time, there lived a champion, noble Sir " + KnightName + ".")
}
</script>
</html>
0 голосов
/ 16 апреля 2019

Вы выполнили Обещание неправильно.Пожалуйста, изучите Обещания в ES5 для справок.Вы присвоили объект Promise своей переменной, которая является асинхронной.Он перешел к следующей строке, добавив сам объект вместо значения Обещания, потому что тогда значение не было разрешено. Вам нужно работать с этим значением, когда Обещание разрешается с использованием метода .then() в Обещании.Вот ваш модифицированный метод TellTale, который работает с Обещанием: 

function TellTale() {
     let KnightName = swal("How do people call you, oh Noble Knight?", 
     {
        content: "input",
     }).then(function(value){
           document.getElementById("Tale").innerHTML = "Once upon a 
           time, there lived a champion, noble Sir " + value + ".";
     });
}

Мое объяснение может показаться немного сложным, но оно прояснится, когда вы немного изучите Обещания и то, как обрабатывать вещи при разрешении / отклонении.

...