Sweet Alert inside a If Statement-CodePudding

I'am trying (without luck) to implement a Swal inside a If statement.

here is what i've done:

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 {
    
    }

And here is the links in my 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>

Any tip to how can I make this work? I guess my problem is inside the If statement, but I don't know how to fix it

CodePudding user response：

In your code, I am not seeing an event listener. Use keyup to verify that the value of the elemnt is empty.

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>

CodePudding user response：

First of all, make sure your imports are correct. You can try debugging by using something simple like: swal("Hello world") anywhere in your code. I roughly copied yours and used a different CDN import from the Swal documentation on their website: <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

In your Javascript code, you're missing a } at the end of your function. Might also be a miscopy, but never too sure.

Also, if you want to make sure your if statement is correct, you can try debugging with console.log("Hello world") at every fork in your code. Then, open the console in your browser to see what is logged. This will help you figure out whether or not your code is running when you want it to.

Also, watch out when you use document.getElementById("numero").value. For instance, your code wouldn't work with <p> because <p> has no value, but it would with <input> or <option>.

Here is a sample of code that is working on my end:

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

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