Swal.fire 当单击 Javascript 中的文本时（Sweetalert）

Question

我想在单击文本时显示带有 sweetalert (swal.fire) 的 window 提示。 if 语句和 window 提示如何在这个库上工作？在这一点之后，你可以意识到我是这个编程世界的新手。

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

<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', })

这是我希望在我点击该元素时出现的提示。点击按钮'OK'时，想验证输入的名字是否正确...:[=15=]

if (name === hidrógeno) {
     Swal.fire ('Correct!', 'You got the answer right!', 'success') }

else {
     Swal.fire ('Incorrect...', 'You failed!', 'error') }

Answer 1

首先将点击事件侦听器附加到您希望可点击的文本。您可以通过使用 querySelector() and its class name, and then adding a click event handler to it with .addEventListener():

获取您的元素来做到这一点

const elem = document.querySelector(".gases");
  elem.addEventListener("click", () => {    
});

在 addEventListener 的回调函数中，您可以使用 Swal.fire() 打开您的 sweetalert 问题弹出窗口。此方法 returns 一个 promise, which resolves to the text entered by the user. To grab the resolve value from this promise, you can attach a .then() and 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>

Swal.fire 当单击 Javascript 中的文本时（Sweetalert）

Swal.fire when click text in Javascript (Sweetalert)

html

javascript

if-statement

sweetalert2