Question

我是JavaScript的初学者，想知道如何有效地使用SweetAlert library来创建故事。我已经使用Windows提示和警报来创建一个像这样的故事：

alert("Hello, we are now going to talk about you now.");
var Name = prompt("What is your Name?");
while (Name === "" || Name == null) {
    alert("Please type a name in the field!")
    var Name = prompt("Type in your name");
} 

alert(Name + "? That is my friend's name as well! ");
var things = prompt("You are at the dinner table. Would you like to have something?");
while (things == "" || things == null) {
    alert("Choose something!")
    var Name = prompt("Have something!");   
}

这是我第一次尝试使用SweetAlert：

swal({
    title: "Hello, we are now going to talk about you now.",
    text: "What is your name?",
    type: "input",
    showCancelButton: false,
    closeOnConfirm: false,
    inputPlaceholder: "Write something"
}, function (Name) {
    if (Name === false) return false;
    if (Name === "") {
        swal.showInputError("Please type a name in the field!");
        return false
    }
    swal("Nice!", "I can confirm that you wrote: " + Name, "success");
});

现在，我试图在我的调查平台上使用SweetAlert复制此故事，但是我对如何在第二个提示下继续操作感到困惑（“您在饭桌上。您想吃点什么吗？”）。

有人可以在这里帮助我吗？

Answer 1

async function tellStory() {
  const {value: name} = await swal.fire({
    title: 'Please tell me your name',
    input: 'text',
    inputOptions: {
      'NAT': 'Nathan',
      'ANG': 'Angela',
      'PHI': 'Phil'
    },
    inputPlaceholder: 'Please type in something',
    showCancelButton: true,
    inputValidator: value => {
      if (value !== 'Nathan') {
        return 'You are not Nathan';
      }
    }
  });

  if (name === undefined) return; //cancel was clicked so end story
  await swal.fire('You selected: ' + name);
}

document.addEventListener('DOMContentLoaded', function() {
  tellStory();
});

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/sweetalert2@9'></script>
  </head>
  <body>
  </body>
</html>

使用SweetAlert创建故事

1 个答案: