Question

我正在尝试编写一个小的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 = /^[AZ09._%+]+@[AZ09.]+\.[AZ]{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>

Answer 1

您的源存在一些问题导致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 = /^[AZ09._%+]+@[AZ09.]+\.[AZ]{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>

Answer 2

为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 () {

同样，声明了动作函数在哪里？

更新：可能是因为你在function maplestory( yummy )之后使用}而不是{在线？

Answer 3

我在this的博客中找到了John Resig

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

Answer 4

试试这个

<!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>

Answer 5

onsubmit="return yay( );"

在括号之间不应有空格。

onsubmit="return yay();"

Html没有调用javascript函数

5 个答案: