If 语句中的 Sweet Alert

Question

我正在尝试（运气不好）在 If 语句中实现 Swal。

这是我所做的：

function myFunction() {
    /* Get the text field */
    var copyText = document.getElementById("numero");
    
    //check if try to copy with the empty input 
    if(document.getElementById("numero").value == ""){
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Nothing to copy!'        
          })      
        // alert("Nothing to copy!!")
    } else {
    
    }

这是我 html 中的链接：

  <!-- dark theme for swal -->
    <link href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet"> 
    
    <!-- javascript file  -->
    <script src="app.js"></script>
    
    <!-- swal link -->
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

关于如何完成这项工作的任何提示？我想我的问题出在 If 语句中，但我不知道如何解决它

Answer 1

首先，确保你的导入是正确的。您可以尝试通过在代码中的任意位置使用类似以下简单内容的方式进行调试：swal("Hello world")。我粗略地复制了你的，并使用了与他们网站上的 Swal 文档不同的 CDN 导入： <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

在您的 Javascript 代码中，您在函数末尾缺少 }。也可能是复制错误，但不太确定。

此外，如果您想确保您的 if 语句是正确的，您可以尝试在代码的每个分支处使用 console.log("Hello world") 进行调试。然后，在浏览器中打开控制台以查看记录的内容。这将帮助您在需要时确定您的代码是否运行。

此外，使用document.getElementById("numero").value时请注意。例如，您的代码不适用于 <p>，因为 <p> 没有值，但它适用于 <input> 或 <option>.

这是我的代码示例：

function myFunction() {
    var copyText = document.getElementById("numero");

    if (document.getElementById("numero").innerHTML == "") {
        swal({
            icon: 'error',
            title: 'Oops...',
            text: 'Nothing to copy!'        
        })     
    } else {
        swal("Copied!")     
    }
}

Answer 2

在你的代码中，我没有看到事件侦听器。使用keyup验证元素的值为空。

var copyText = document.getElementById("numero");

copyText.addEventListener('keyup', () => {
  if (document.getElementById("numero").value == "") {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Nothing to copy!'
    })
  }
})

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <head>
      <link href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
      <script src="app.js"></script>
      <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    </head>
  </head>

  <body>
    <input type="text" id="numero">
  </body>

</html>

Answer 3

最终 一切正常， 但是...我忘记将其放入我的代码中

event.preventDefault()

这可以防止 Swal 无法正常工作。

到最后，最终的代码是这样的：

function myFunction() {
    /* Get the text field */
    var copyText = document.getElementById("numero");
 
    if(document.getElementById("numero").value == ""){

        Swal.fire(
            'Ooops...',
            'Nothing to copy here!',
            'error'          
          )
          event.preventDefault()
 
    } else {}
    /*code here
    }

谢谢大家给我提示

If 语句中的 Sweet Alert

Sweet Alert inside a If Statement

html

javascript

alert

if-statement