Estoy tratando (sin suerte) de implementar un Swal dentro de una declaración If.
esto es lo que he hecho:
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 { }Y aquí están los enlaces en mi 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>¿Algún consejo sobre cómo puedo hacer que esto funcione? Supongo que mi problema está dentro de la instrucción If, pero no sé cómo solucionarlo.
En su código, no veo un detector de eventos. Use keyup para verificar que el valor del elemento esté vacío.
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>terminé diciendo que todo funcionaba bien, pero... olvidé poner esto en mi código
event.preventDefault()
Eso evita que el Swal funcione bien.
Al final, el código final quedó así:
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 }Gracias por darme esos consejos chicos 😉
En primer lugar, asegúrese de que sus importaciones sean correctas. Puede intentar la depuración usando algo simple como: swal("Hello world") en cualquier parte de su código. Copié aproximadamente el suyo y usé una importación de CDN diferente de la documentación de Swal en su sitio web: <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
En su código Javascript, le falta un } al final de su función. También podría ser una copia errónea, pero nunca demasiado seguro.
Además, si desea asegurarse de que su instrucción if sea correcta, puede intentar depurar con console.log("Hello world") en cada bifurcación de su código. Luego, abra la consola en su navegador para ver lo que está registrado. Esto lo ayudará a determinar si su código se ejecuta o no cuando lo desea.
Además, tenga cuidado cuando use document.getElementById("numero").value . Por ejemplo, su código no funcionaría con <p> porque <p> no tiene valor, pero sí con <input> o <option> .
Aquí hay una muestra de código que está funcionando en mi extremo:
function myFunction() { var copyText = document.getElementById("numero"); if (document.getElementById("numero").innerHTML == "") { swal({ icon: 'error', title: 'Oops...', text: 'Nothing to copy!' }) } else { swal("Copied!") } }