If 语句中的 Sweet Alert
[英]Sweet Alert inside a If Statement
问题描述
I'am trying (without luck) to implement a Swal inside a If statement.
我正在尝试（运气不好）在 If 语句中实现Swal 。
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:这是我的 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我想我的问题出在 If 语句中，但我不知道如何解决
3 个解决方案
解决方案1
1 2022-03-30 22:33:56
In your code, I am not seeing an event listener.在您的代码中，我没有看到事件侦听器。 Use keyup to verify that the value of the elemnt is empty.使用keyup验证 elemnt 的值为空。
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>
解决方案2
0 2022-03-30 22:14:43
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.您可以尝试通过在代码中的任何位置使用类似简单的东西进行调试： swal("Hello world") 。 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>我粗略地复制了你的，并使用了与他们网站上的 Swal 文档不同的 CDN 导入： <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.在您的 Javascript 代码中，您在 function 的末尾缺少一个} 。也可能是一个错误复制，但永远不会太确定。
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.此外，如果您想确保您的 if 语句是正确的，您可以尝试在代码的每个分支处使用console.log("Hello world")进行调试。 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 .另外，在使用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> .例如，您的代码不适用于<p>因为<p>没有值，但它适用于<input>或<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!")
}
}
解决方案3
0 已采纳 2022-04-01 20:26:18
end up that everything was working nice, but... I forget to put this in my code最后一切都很好，但是......我忘了把它放在我的代码中
event.preventDefault()
That prevent the Swal to not work well.这可以防止 Swal 无法正常工作。
By the end, the final code went like this:最后，最终的代码是这样的：
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 }
Thanks for giving me that tips guys谢谢你给我提示伙计们
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.