gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 07:35:33 27 4
gpt4 key购买 nike

我想在单击文本时使用 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() 打开您的 sweetalert 问题弹出窗口。此方法返回 promise ,解析为用户输入的文本。要从此 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>

关于javascript - 在 Javascript 中单击文本时 Swal.fire (Sweetalert),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67760745/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com