Javascript 用户单击“提交”后不会显示警报消息_Javascript_Html_Jquery

Javascript 用户单击“提交”后不会显示警报消息

javascript html jquery

Javascript 用户单击“提交”后不会显示警报消息,javascript,html,jquery,Javascript,Html,Jquery,所以我对编码是全新的，我正试图完成我在CodePen上的第一个项目。我无法让我的js代码响应我的html。我相信我正确地将js页面链接到html页面，用jquery插入了引导程序，我看不出我在哪里写错了实际代码，所以我不知道为什么它没有做任何事情 $（“#提交”）。单击（函数（））{ 提醒（“谢谢你的留言！我会在找到有免费wifi的地方后立即回复！”）； var userName=$（“#userName”）.val（）； var userEmail=$（“#userEmail”）.val（）

所以我对编码是全新的，我正试图完成我在CodePen上的第一个项目。我无法让我的js代码响应我的html。我相信我正确地将js页面链接到html页面，用jquery插入了引导程序，我看不出我在哪里写错了实际代码，所以我不知道为什么它没有做任何事情

$（“#提交”）。单击（函数（））{
提醒（“谢谢你的留言！我会在找到有免费wifi的地方后立即回复！”）；
var userName=$（“#userName”）.val（）；
var userEmail=$（“#userEmail”）.val（）；
var userMessage=$（“#userMessage”）.val（）；
}
$（“.contact header”）.hover（函数（））{
$（“.contact header”）.css（“颜色”、“黑色”）；
}

正文{
背景颜色：白肋木；
左边距：30px；
右边距：30px；
}
h1，h6{
字体系列：“柠檬”，草书；
颜色：马鞍色；
文本对齐：居中；
}
形式{
文本对齐：居中；
边缘顶部：50px；
}
.输入{
背景颜色：银色；
宽度：300px；
边缘底部：15px；
}
.留言{
高度：100px；
}












联系我
请随时发送任何问题或对我的潜在作品提供！确保您包括您感兴趣购买的产品。只有严肃的询问

调试JS时，始终打开devtools的控制台输出，通常通过按F12来完成，并检查错误

在这种情况下，您会遇到一些语法问题：

函数定义后的
```
）
```
位于错误位置，应将其删除
事件处理程序函数体之后需要有一个
```
）
```
来关闭
```
submit（）
```
方法调用
按钮上没有
```
submit
```
id，因此事件不会被绑定。您需要添加该id才能使此代码正常工作
更好的方法是使用
```
form
```
元素的
```
submit
```
事件，而不是单击submit按钮
当元素悬停时使用CSS而不是JS来更改样式，因为前者的性能更好

说了这么多，试试这个：

$("form").submit(function(e) {
  e.prebentDefault(); // stop the form submission while testing. Remove this line afterwards

  alert("Thank you for your message! I will respond as soon as I find somewhere with free wifi!");
  var userName = $("#userName").val();
  var userEmail = $("#userEmail").val();
  var userMessage = $("#userMessage").val();
})

。联系人标题：悬停{
颜色：#000；
}

调试JS时，始终打开devtools的控制台输出，通常通过按F12来完成，并检查错误

在这种情况下，您会遇到一些语法问题：

函数定义后的
```
）
```
位于错误位置，应将其删除
事件处理程序函数体之后需要有一个
```
）
```
来关闭
```
submit（）
```
方法调用
按钮上没有
```
submit
```
id，因此事件不会被绑定。您需要添加该id才能使此代码正常工作
更好的方法是使用
```
form
```
元素的
```
submit
```
事件，而不是单击submit按钮
当元素悬停时使用CSS而不是JS来更改样式，因为前者的性能更好

说了这么多，试试这个：

$("form").submit(function(e) {
  e.prebentDefault(); // stop the form submission while testing. Remove this line afterwards

  alert("Thank you for your message! I will respond as soon as I find somewhere with free wifi!");
  var userName = $("#userName").val();
  var userEmail = $("#userEmail").val();
  var userMessage = $("#userMessage").val();
})

。联系人标题：悬停{
颜色：#000；
}

除了几个语法错误，您的事件看起来正常

把它弄干净一点：

$（“#提交”）。单击（函数（）{
提醒（“谢谢你的留言！我会在找到有免费wifi的地方后立即回复！”）；
var userName=$（“#userName”）.val（）；
var userEmail=$（“#userEmail”）.val（）；
var userMessage=$（“#userMessage”）.val（）；
})
$（“.contact header”）.hover（函数（）{
$（“.contact header”）.css（“颜色”、“黑色”）；
})

至于你关于警报的问题。

$（“#提交”）。单击

完全可以理解您的编写方式。但是，您等待的按钮没有与“提交”匹配的ID

在您的表格中，您有以下内容：

但是，要使事件正常工作，需要向其添加

id

属性，以便JQuery能够正确找到按钮。像这样：

JQuery背后的逻辑是查找id为“submit”的HTML元素：

$（“#submit”）

。#表示它将搜索一个ID。现在，如果您这样做：

$（“.submit”）

它将使用

submit

类搜索元素。E:G:

如果需要，请看一下如何通过JQuery获取元素：

除了几个语法错误，您的事件看起来还可以