如何使用模态对话框库将用户输入存储为变量？ (JavaScript)答案

【问题标题】：How to store user input as a variable with a modal dialog library? (JavaScript)如何使用模态对话框库将用户输入存储为变量？ (JavaScript)
【发布时间】：2019-04-14 19:12:51
【问题描述】：

我正在尝试通过警报将用户输入保存为变量。我实际上可以通过 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>

我寻找与上面代码中相同的变量处理。这两个库是否有可能，或者您可以建议一个更好的解决方案来替换标准警报？

谢谢！

【问题讨论】：

请尝试使用模态而不是警报来收集用户的输入。请查看 W3 学校的模态教程：w3schools.com/howto/howto_css_modals.asp
@ManoshTalukder 非常感谢您的回复。不幸的是，没有关于用户输入收集的信息。另外，到目前为止，我还没有在互联网上找到类似的东西。可能您知道其他教程，将不胜感激！
不客气。不幸的是，在不知道用户输入的内容的情况下，很难推测出合适的解决方案。我可以建议的是，如果您的项目是一个简单的单页应用程序 (SPA)，您可以尝试使用 AngularJS、Angular 或 React 等前端框架，并且可以轻松地将用户输入与您的模型绑定。尝试查找他们的参考资料。如果您使用适当的框架来实现这一点，您可以稍后将其转换为可以使用 API 调用来管理故事数据绑定的东西。
@ManoshTalukder 再次感谢您的回复，基本上我使用的是香草 JS，我相信它应该在那里工作。您可以在这里看到如何处理用户的输入，只需按下“告诉我一个故事”按钮codepen.io/dimos082/pen/ROLEpo；以及我如何尝试使用 sweetalert 库（作为 CDN）codepen.io/dimos082/pen/xeXmqK ；我想我在承诺中遗漏了一些东西。
抱歉，我错过了您仅在 Promise 方面寻求帮助，因此在下面提供了带有 Promise 的解决方案，而不是替代解决方案。

标签： javascript modal-dialog alert sweetalert sweetalert2

【解决方案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】：

您错误地处理了 Promise。请研究Promises in ES5 以获取参考。你为你的变量分配了一个 Promise 对象，它是异步的。它转到下一行，附加了对象本身而不是 Promise 的值，因为当时该值没有被解析。当使用 Promise 上的 .then() 方法解析 Promise 时，您需要使用该值。这是您修改后的与 Promise 一起使用的 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 + ".";
     });
}

我的解释可能看起来有点复杂，但是当你研究一下 Promises 以及如何处理 resolve/reject 时就会明白。

【讨论】：

非常感谢，马诺什。不幸的是，这段代码不起作用。但我已经按照你的要求完成了承诺并想出了那篇文章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 + ".") }
由于某种原因，当我将我的解决方案复制粘贴到您的 codepen 时，它不起作用，但再次输入它似乎起作用。无论您使用常规函数还是箭头函数（就像您所做的那样）处理已解决的承诺，它都会起作用。很高兴知道你掌握了它。 :)
谢谢你，马诺什！