在 Javascript 中单击文本时 Swal.fire (Sweetalert)

Question

我想在单击文本时显示带有 sweetalert (swal.fire) 的窗口提示。if 语句和窗口提示符如何在这个库上工作？在此之后，您就会意识到我是这个编程世界的新手。

\n

之后，我想为该输入分配一个值并验证答案是否正确。

\n

<td class="gases" title="Hidr\xc3\xb3geno" id="H">H</td>这是我要单击的元素

\n

Swal.fire({\ntitle:'\xc2\xbfCu\xc3\xa1l es el elemento?',\ntext: 'Introduce el nombre aqu\xc3\xad',\ninput: 'text',\ninputPlaceholder: 'Nombre', })\n

\n

这是我单击该元素时想要出现的提示。单击“确定”按钮后，想要验证引入的名称是否正确...：

\n

if (name === hidr\xc3\xb3geno) {\n     Swal.fire ('Correct!', 'You got the answer right!', 'success') }\n\nelse {\n     Swal.fire ('Incorrect...', 'You failed!', 'error') }\n

\n

Answer 1

首先将单击事件侦听器附加到您想要可单击的文本。您可以通过使用元素querySelector()及其类名来获取元素，然后使用以下命令向其添加单击事件处理程序来完成此操作.addEventListener()：

\n

const elem = document.querySelector(".gases");\n\nelem.addEventListener("click", () => {\n  // callback function\n});\n

\n

在 addEventListener 的回调函数内部，您可以使用 打开 sweetalert 问题弹出窗口Swal.fire()。此方法返回一个promise，它解析为用户输入的文本。要从此承诺中获取已解析的值，您可以附加 a.then()并从参数中解构输入的文本：

\n

\r\n

\r\n

const elem = document.querySelector(".gases");\nelem.addEventListener("click", () => {\n  Swal.fire({\n    title: \'\xc2\xbfCu\xc3\xa1l es el elemento?\',\n    text: \'Introduce el nombre aqu\xc3\xad\',\n    input: \'text\',\n    inputPlaceholder: \'Nombre\',\n  }).then(({value}) => {\n    if (value === "hidr\xc3\xb3geno") {\n      Swal.fire(\'Correct!\', \'You got the answer right!\', \'success\')\n    } else {\n      Swal.fire(\'Incorrect...\', \'You failed!\', \'error\')\n    }\n  });\n});

\r\n

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js"></script>\n\n<table>\n  <tr>\n    <td class="gases" title="Hidr\xc3\xb3geno" id="H">Click</td>\n  </tr>\n</table>

\r\n

\r\n

\r\n

\n