Html 不调用 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4457740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html not calling javascript functions
提问by ???
I'm trying to code a small html5 webpage that asks a user to type in a comment and their e-mail address. If they do not enter a comment and or an e-mail they will be prompted via javascript to fix their input. The problem I'm having is that the javascript is not functioning at all. I think it's being skipped altogether. Please tell me where I'm going wrong...
我正在尝试编写一个小的 html5 网页，要求用户输入评论和他们的电子邮件地址。如果他们没有输入评论和/或电子邮件，他们将通过 javascript 提示修复他们的输入。我遇到的问题是 javascript 根本无法运行。我认为它被完全跳过了。请告诉我哪里出错了...
<!DOCTYPE HTML>
<html lang="en-US">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/new.css">
<title>Comments</title>
</head>
<body>
<nav id="navbar"> Navigation:
<table><tr>
<td><a href="bio.html">Bio</a></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="classes.html">Classes</a></td>
<td><a href="new.html">New</a></td>
</tr></table>
</nav>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript>
function yay () {
if (document.poop.melon.value == "" || document.poop.melon.value == "Type comment here!" || document.poop.melon.value == "..." )
{
alert ( "Fill in the comment box you poopyhead!" );
document.poop.melon.value = "Type comment here!";
return false;
}
if (document.poop.maplestory.value == "[email protected]" || document.poop.maplestory.value == "" || maplestory (document.poop.maplestory.value)){
alert ("Dear Sir or Madam, please type in your e-mail address.");
return false;
}
return true;
}
function?maplestory(?yummy?)
{
???var?regex?=?/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
???if( yummy.search( regex ) == -1 )
?????return?true?;
???return?false?;
}
</script>
</header>
<h2>Leave a delicious comment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay();">
<textarea name="melon" id="melon" cols="35" rows="10">...</textarea><br>
<label for "maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="35" rows="1">[email protected]</textarea><br>
<input id="submit" type="submit" value="Submit"></form>
<footer><div class="right"> name © 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body>
</html>
回答by waiwai933
There are several problems with your source that stopped Javascript from running:
您的源代码有几个问题导致 Javascript 无法运行：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
You were missing the closing quotes for the src attribute. That made the DOM interpret everything after that as part of the src attribute, screwing up everything.
您缺少 src 属性的结束引号。这使得 DOM 将之后的所有内容都解释为 src 属性的一部分，搞砸了一切。
function maplestory( yummy )
{
You had a closing curly bracket instead of an opening one. This caused a parse error because Javascript was expecting an opening curly bracket.
你有一个结束的大括号而不是一个开始的。这导致了解析错误，因为 Javascript 需要一个左大括号。
if( yummy.search( regex ) == 1 )
You had an invisible character before the 1. This one was particularly difficult to find—I had to use my Javascript debugger to find it.
你在 1 之前有一个隐形字符。这个特别难找——我不得不使用我的 Javascript 调试器来找到它。
<label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1">[email protected]</textarea><br>
This shouldn't affect your problem, but you were missing the equals sign between the forand the "maplestory".
这不应该影响您的问题，但是您缺少for和之间的等号"maplestory"。
由于您似乎无法使用它，请复制并粘贴以下内容，看看它是否有效。（对我来说，无需编辑文本框，如果您单击提交按钮，您会立即收到警报）。如果它不起作用，请告诉我您使用的浏览器。
<!DOCTYPE HTML>
<html lang="en-US">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/new.css">
<title>Comments</title>
</head>
<body>
<nav id="navbar"> Navigation:
<table><tr>
<td><a href="bio.html">Bio</a></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="classes.html">Classes</a></td>
<td><a href="new.html">New</a></td>
</tr></table>
</nav>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function yay(){
if (document.poop.melon.value == "" || document.poop.melon.value == "Type comment here!" || document.poop.melon.value == "..." )
{
alert ( "Fill in the comment box!" );
document.poop.melon.value = "Type comment here!";
return false;
}
if (document.poop.maplestory.value == "[email protected]" || document.poop.maplestory.value == "" || maplestory (document.poop.maplestory.value)){
alert ("Dear Sir or Madam, please type in your e-mail address.");
return false;
}
return true;
}
function maplestory(yummy)
{
var regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( yummy.search( regex ) == -1 )
return true ;
return false ;
}
</script>
</header>
<h2>Leave a poopy comment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay();">
<textarea name="melon" id="melon" cols="32" rows="10">...</textarea><br>
<label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1">[email protected]</textarea><br>
<input id="submit" type="submit" value="Submit"></form>
<footer><div class="right"> name © 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body>
</html>
回答by The Scrum Meister
use a separate script tag for the jquery, and for your javascript like this:
为 jquery 和您的 javascript 使用单独的脚本标记，如下所示：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript">
function yay () {
also, where is the action function declared?
另外，动作函数在哪里声明？
UPDATE:
could it be becouse you are using a } instead of a { on the line after function maplestory( yummy )?
更新：可能是因为您在 之后的行上使用了 } 而不是 { function maplestory( yummy )？
回答by Arun P Johny
I found thisfrom John Resig's blog
我从John Resig的博客中找到了这个
Script tags that references external resources may not be able to execute inlined scripts.
引用外部资源的脚本标签可能无法执行内联脚本。
回答by Bhanu Prakash Pandey
try this
试试这个
<!DOCTYPE HTML>
<html lang="en-US">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/new.css">
<title>Comments</title>
</head>
<body>
<nav id="navbar"> Navigation:
<table><tr>
<td><a href="bio.html">Bio</a></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="classes.html">Classes</a></td>
<td><a href="new.html">New</a></td>
</tr></table>
</nav>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function yay () {
if (document.poop.melon.value == "" || document.poop.melon.value == "Type comment here!" || document.poop.melon.value == "..." )
{
alert ( "Fill in the comment box!" );
document.poop.melon.value = "Type comment here!";
return false;
}
if (document.poop.maplestory.value == "[email protected]" || document.poop.maplestory.value == "")
{
alert ("Dear Sir or Madam, please type in your e-mail address.");
return false;
}
else
{
return true;
}
}
</script>
</header>
<h2>Leave a poopy comment below:</h2>
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay();">
<textarea name="melon" id="melon" cols="32" rows="10">...</textarea><br>
<label for "maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1">[email protected]</textarea><br>
<input id="submit" type="submit" value="Submit"></form>
<footer><div class="right"> name © 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body>
</html>
回答by DaveB
onsubmit="return yay( );"
should not have a space between the parenthesis.
括号之间不应有空格。
onsubmit="return yay();"
