logo标签列表

HTML没有调用JavaScript函数

javascripthtml
4

我正在编写一个小型的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 == "youremail@mail.com" || 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">youremail@mail.com</textarea><br>
<input id="submit" type="submit" value="Submit"></form>


<footer><div class="right"> name &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body> 
</html>
你有收到任何 JavaScript 错误吗？ - The Scrum Meister
5个回答
5
您的源代码存在几个问题，导致Javascript无法运行：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

您缺少了src属性的闭合引号。这使得DOM将之后的所有内容都解释为src属性的一部分，从而破坏了一切。

function maplestory( yummy )
{

你使用的是闭合大括号而不是开放大括号，这导致了解析错误，因为Javascript期望看到一个开放大括号。
if( yummy.search( regex ) == 1 )

在数字1前面有一个不可见字符。这个特别难找——我不得不使用我的Javascript调试器才能找到它。

<label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1">youremail@mail.com</textarea><br>

这不会影响你的问题，但是在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 == "youremail@mail.com" || 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">youremail@mail.com</textarea><br>
    <input id="submit" type="submit" value="Submit"></form>


    <footer><div class="right"> name &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
    </body> 
    </html>
有趣的是，1的值应该是-1？我已经修复了所有这些问题，但还是不行 :( - 에이바바
谢谢，看起来可以了。我终于可以完成剩下的脚本了！ :D - 에이바바
1
请使用单独的脚本标签来引入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 () {

此外，action函数在哪里声明？

更新： 是不是因为在function maplestory( yummy )后面的一行使用了 } 而不是 { ？

嗯，我尝试了这个，但似乎仍然不起作用。将它们分开的具体原因是什么？ - 에이바바
<form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay( );"> - 에이바바
1
不，被调用的动作函数是 action("在评论框中填写！"); - The Scrum Meister
哦，本应该是“alert”，我已经修复了，但不幸的是它仍然无法工作。 - 에이바바
1

试试这个

<!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 == "youremail@mail.com" || 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">youremail@mail.com</textarea><br>
<input id="submit" type="submit" value="Submit"></form>


<footer><div class="right"> name &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
</body> 
</html>
这个可以工作，但我不确定你具体改了什么。我看到有些东西被改变了，但当我尝试自己改变它们时，它们就无法工作了。但还是谢谢你的帮助。 - 에이바바
等等，你删掉了我的电子邮件验证表达式；p - 에이바바
1
onsubmit="return yay( );"

括号之间不应该有空格。

onsubmit="return yay();"
那不会有任何影响。 - N.R
1

我从John Resig的博客中发现了this。

引用外部资源的脚本标签可能无法执行内联脚本。

我已经修复了这个问题，但它仍然无法正确调用JavaScript。 - 에이바바
你能把 alert("1") 语句放在内联脚本的第一行吗？然后试试看。还有一件事，关闭脚本标签时请使用正确的 </script> 标签，不要像 <script scr="" /> 这样。 - Arun P Johny
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接