#javascript #modal-dialog #alert #sweetalert #sweetalert2
#javascript #modal-dialog #предупреждение #sweetalert #sweetalert2
Вопрос:
Я пытаюсь сохранить пользовательский ввод с помощью alert в качестве переменной. На самом деле я могу сделать это через JS, используя prompt, но не могу реализовать аналогичное решение с библиотеками sweetalert и sweetalert2.
Я прочитал их документацию и примеры:
https://sweetalert.js.org/guides/#advanced-examples
https://sweetalert2.github.io/#input-types
В лучшем случае мои усилия возвращают заполнитель [Object promise] вместо текста переменной, но обычно он вообще не работает: 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. Пожалуйста, попробуйте использовать модальный для сбора ввода от пользователя вместо предупреждения. Пожалуйста, ознакомьтесь с модальным руководством из школ W3: w3schools.com/howto/howto_css_modals.asp
2. @ManoshTalukder Большое вам спасибо за ваш ответ. К сожалению, нет информации о сборе пользовательского ввода. Кроме того, я пока не нашел ничего подобного в Интернете. Возможно, вы знаете другие учебные пособия, буду признателен!
3. Добро пожаловать. К сожалению, не зная, что будет поступать от пользователей в качестве входных данных, трудно предположить подходящее решение. Что я могу предложить, так это то, что если ваш проект представляет собой простое одностраничное приложение (SPA), попробуйте использовать фреймворк интерфейса, такой как AngularJS, Angular или React, и вы можете легко связать пользовательский ввод с вашей моделью. Попробуйте посмотреть их ссылки. Если вы используете соответствующую среду для достижения этой цели, вы можете позже преобразовать это во что-то, что может использовать вызовы API для управления привязкой данных истории.
4. @ManoshTalukder Еще раз спасибо за ваш ответ, в основном я использую ванильный JS, я считаю, что он должен там работать. Вы можете увидеть, как обрабатывается пользовательский ввод, просто нажав кнопку «Расскажи мне историю» codepen.io/dimos082/pen/ROLEpo ; И как я пытаюсь поступить с библиотекой sweetalert (как CDN) codepen.io/dimos082/pen/xeXmqK ; Наверное, я что-то упускаю из видув обещаниях.
5. Извините, я пропустил, что вы просили помощи только с обещаниями, поэтому вместо альтернативного решения предоставьте решение с обещанием ниже.
Ответ №1:
Решение этой проблемы:
<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>
Ответ №2:
Вы неправильно обработали обещание. Пожалуйста, изучите обещания в ES5 для ссылок. Вы назначили объект Promise своей переменной, которая является асинхронной. Он перешел к следующей строке, добавив сам объект вместо значения Promise, потому что тогда значение не было разрешено.Вам нужно работать с этим значением, когда обещание будет разрешено с помощью .then() метода для обещания. Вот ваш модифицированный контрольный метод, который работает с обещанием:
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 ".";
});
}
Мое объяснение может показаться немного сложным, но оно прояснится, когда вы немного изучите обещания и то, как обращаться с материалами при разрешении / отклонении.
Комментарии:
1. Большое спасибо, Манош. К сожалению, этот фрагмент кода не работает. Но я выполнил обещания, как вы просили, и придумал эту часть
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 ".") }2. По какой-то причине, когда я скопировал вставленное мое решение в ваш codepen, оно не сработало, но повторный ввод, похоже, сработал. Независимо от того, обрабатываете ли вы разрешенное обещание с помощью обычной функции или функции со стрелкой (как вы это делали), оно будет работать. Рад знать, что вы это поняли. 🙂
3. Спасибо, Манош!