如何解决在 Javascript 中单击文本时 Swal.fire (Sweetalert)
我想在单击文本时显示带有sweetalert (swal.fire) 的窗口提示。 if 语句和窗口提示如何在这个库上工作?在这一点之后,你会明白我是这个编程世界的新手。
在那之后,我想为该输入分配一个值并验证答案是否正确。
<td class="gases" title="Hidrógeno" id="H">H</td>
这是我要点击的元素
Swal.fire({
title:'¿Cuál es el elemento?',text: 'Introduce el nombre aquí',input: 'text',inputPlaceholder: 'Nombre',})
这是我点击该元素时想要出现的提示。单击“确定”按钮时,要验证引入的名称是否正确...:
if (name === hidrógeno) {
Swal.fire ('Correct!','You got the answer right!','success') }
else {
Swal.fire ('Incorrect...','You Failed!','error') }
解决方法
首先将点击事件侦听器附加到您希望可点击的文本。您可以通过使用 querySelector()
及其类名获取元素,然后使用 .addEventListener()
向其添加点击事件处理程序来实现此目的:
const elem = document.querySelector(".gases");
elem.addEventListener("click",() => {
});
在 addEventListener 的回调函数内,您可以使用 Swal.fire()
打开您的甜蜜问题弹出窗口。此方法返回一个 promise,它解析为用户输入的文本。要从此承诺中获取解析值,您可以附加 .then()
和 destructure 参数中输入的文本:
const elem = document.querySelector(".gases");
elem.addEventListener("click",() => {
Swal.fire({
title: '¿Cuál es el elemento?',text: 'Introduce el nombre aquí',input: 'text',inputPlaceholder: 'Nombre',}).then(({value}) => {
if (value === "hidrógeno") {
Swal.fire('Correct!','You got the answer right!','success')
} else {
Swal.fire('Incorrect...','You failed!','error')
}
});
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js"></script>
<table>
<tr>
<td class="gases" title="Hidrógeno" id="H">Click</td>
</tr>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。