警报按钮没有响应

Question

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Project 506</title>
    <link rel="stylesheet" href="" type="text/css" />
    <script type="text/javascript" src="sweetalert.min.js"></script>
    <style type="text/css">
      body {
        text-align: center;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#first").click(function () {
          alert("Oops...", "Something went wrong!", "error");
        });
     });
    </script>
  </head>
  <body>
    <h1>Message Boxes</h1>
    <input type="button" id="first" value="Just a Notification" />
    <input type="button" id="second" value="Successfully Completed!" />
    <input type="button" id="third" value="Something Went Wrong!" />
  </body>
</html>

单击 #first 时如何显示警告框？我不确定这段代码有什么问题。

感谢您的帮助。

Answer 1

jQuery 库在您的 HTML 文档的 head 标签内丢失。包含在 <head> 和 </head> 标签之间。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

您的 HTML 文件应如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Project 506</title>
    <link rel="stylesheet" href="" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="sweetalert.min.js"></script>
    <style type="text/css">
    body {
    text-align: center;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#first").click(function () {
                alert("Oops...", "Something went wrong!", "error");
            });
         });
    </script>
</head>
<body>
    <h1>Message Boxes</h1>
    <input type="button" id="first" value="Just a Notification" />
    <input type="button" id="second" value="Successfully Completed!" />
    <input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>

Answer 2

您不必要地将逗号放在警报中的字符串引号之外。您也可以在结束 body 标记 之前编写脚本代码，而不是将其写在 head 标记 中。这肯定会奏效。

$(document).ready(function () {
        $("#first").click(function () {
            alert("Oops... , Something went wrong! , error");
        });
});

Answer 3

您忘记在代码中添加 jquery 库。您需要在头部或主体内的代码中包含 jquery 脚本才能使您的代码正常工作。

Jquery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

alert() 函数中只允许有一个参数。如果您使用多个参数，将使用逗号前的第一个参数。

这是您的代码

alert("Oops...", "Something went wrong!", "error"); //this will alert oops..

更新代码

alert("Oops...Something went wrong! error");

我看到你在代码中使用了甜蜜的 alert.js。如果您想要 sweetalert 而不是本机警报框。您需要使用以下代码替换您的代码。 sweet alert

允许逗号

sweetAlert("Oops...", "Something went wrong!", "error");

查看更新后的代码:) :)

<!DOCTYPE html>
<html>
<head>
    <title>Project 506</title>
    <link rel="stylesheet" href="" type="text/css" />

    <script type="text/javascript" src="sweetalert.min.js"></script>
    <style type="text/css">
    body {
    text-align: center;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#first").click(function () {
                alert("Oops...Something went wrong! error");
            });
         });
    </script>
</head>
<body>
    <h1>Message Boxes</h1>
    <input type="button" id="first" value="Just a Notification" />
    <input type="button" id="second" value="Successfully Completed!" />
    <input type="button" id="third" value="Something Went Wrong!" />
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

看jsfiddleJSFIDDLE

警报按钮没有响应

Alert button is not responding

javascript

alert

button