Question

我没有太多的JavaScript经验，尽管我已经用其他语言编程并且通常了解所有函数和事件监听器的功能和诸如此类的东西。

然而，我已经玩了几个小时的任务，并且不确定某些事情，我试图用谷歌找到答案，但没有运气。

所以我试图让它成为事件发生时调用函数（例如“模糊”和“单击”），但似乎所有的监听器都加载到“addListeners（）”函数中。所有事件侦听器仅在加载/重新加载页面时触发，然后发送警报。

代码如下所示：

  <!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" type="text/css" href="order-form.css">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Food order form</title>
<script type="text/Javascript">

function validateForm (form) {
    if (isNotEmpty(form.room)){  
      if (checkName(form.name)){ 

        if (validRoom(form.room)) {

          return true;
        }
      }
    }
  return false;
}

function isNotEmpty(elem){
  var str = elem.value;
  if (str == null || str.length == 0){
    alert("Please fill in the required fields.");
    return false;
  }
  else {
    return true;
  }
}

function checkName(theName) {
  if (theName.value == "") {
    alert ("Name must be entered");
    return false;
  };
  if (!validName(theName.value)){
    alert("Name should be alphabetic"); 
    return false;
  };
  return true;
}

function validName(theName) {
var valid = true;
for (var i = 0; i < theName.length; i++) {
   thisChar = theName.charAt(i);
   if ( ((thisChar < "A") || (thisChar > "Z")) &&
       ((thisChar < "a") || (thisChar > "z"))){ 
           return !valid;
       }; 
   };
theName.charAt(0).toUpperCase();
return valid;
}

function validRoom(theRoom) {
  var valid = true;
  if (theRoom.value == "") {
        alert ("Room number must be entered");
        return !valid;
  };
  roomNumber = parseInt(theRoom.value); 
  if (isNaN(roomNumber)){  
    alert("A number is required"); 
        return !valid;
  };
  if ((roomNumber < 100) || (roomNumber > 399)){
    alert("Room number must be between 100 and 399"); 
        return !valid;
  };
  return valid;
}

  function formClock() {
   var time = new Date()
   var hour = time.getHours()
   var minute = time.getMinutes()
   var second = time.getSeconds()
   var temp = "" + ((hour > 12) ? hour - 12 : hour)
   temp += ((minute < 10) ? ":0" : ":") + minute
   temp += ((second < 10) ? ":0" : ":") + second
   temp += (hour >= 12) ? " P.M." : " A.M."
   document.FoodOrder.Time.value = temp ;
   setTimeout("formClock()",1000) ;
}

  function checkRoom(theRoom) {
    if (theRoom.value ==""){
        alert("Room number must be entered");}

    roomNumber = parseInt(theRoom.value);
    if (isNaN(roomNumber)){
            alert("A number is required");}

    if ((roomNumber < 100) || (roomNumber > 399)){
            alert("Room number must be between 100 and 399"); 
      } 
}

  function addListeners(){
  clock = document.getElementById("clock");
  clock.addEventListener("mouseover", formClock, false);

  submit = document.getElementById("submit");
  submit.addEventListener("click", validateForm(FoodOrder), false);

  room = document.getElementById("room");
  room.addEventListener("blur", checkRoom(FoodOrder.room), false);
    }



  window.addEventListener("load", addListeners, false);
</script>
</head>

<body>
<h2>Froggle's Food Delivery Service<br>Order Form</h2>

<div class="form"><form NAME="FoodOrder"
      ACTION="#"
      METHOD="POST">

<p><input TYPE = "text" NAME = "Time" id="clock" SIZE = 20>
<p>Name <input TYPE = "text" NAME = "name" SIZE = 20>

<br>IST Room <input TYPE = "text" NAME = "room" id="room" SIZE =3>

<br>Food Menu: 
   <br> <input TYPE="radio" NAME="food" value="Chilli-4.50">Chilli $4.50
  <br><input TYPE="radio" NAME="food" value="Pizza-2.50"> Pizza  $2.50
  <br><input TYPE="radio" NAME="food" value="Wedges-4.50"> Wedges $4.50
  <br><input TYPE="radio" NAME="food" value="Bagel-3.00"> Bagel $3.00
<br><br>Drink Menu: 
    <br><input TYPE="radio" NAME="drink" value="Flavoured Milk-1.00"> Flavoured $1.00
    <br><input TYPE="radio" NAME="drink" value="Mineral Water-1.50"> Mineral Water  $1.50
    <br><input TYPE="radio" NAME="drink" value="Ale-4.50"> Ale $4.50

<br>
<br>  <input TYPE=SUBMIT VALUE="Order" id="submit" >
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input TYPE=RESET VALUE="Cancel"><br>
</form></div>

  </body>
  </html>

提前感谢任何和所有帮助。

Answer 1

问题在于这些代码行：

  submit = document.getElementById("submit");
  submit.addEventListener("click", validateForm(FoodOrder), false);

  room = document.getElementById("room");
  room.addEventListener("blur", checkRoom(FoodOrder.room), false);

validateForm(FoodOrder)和checkRoom(FoodOrder.room)立即执行这些功能。只要有一个函数名后跟()，就会向Javascript发送一个命令来立即执行该函数。然后，将该函数的结果指定为事件侦听器。显然，这会在页面加载时计算validateForm和checkForm的结果，并且随后不会执行任何有用的操作。

当然，您要做的是仅在触发事件时执行这些代码片段。为此，您需要将实际函数传递给addEventListener，就像在以下代码行中一样：

clock.addEventListener("mouseover", formClock, false);

但是你需要将参数传递给函数，而这些函数只能通过传递名称来实现。那么该怎么办？那么，你实际上需要创建另一个函数，该函数在事件被触发时运行，然后使用适当的参数调用所需的函数：

  submit = document.getElementById("submit");
  submit.addEventListener("click", function() {
      validateForm(FoodOrder);
  }, false);

  room = document.getElementById("room");
  room.addEventListener("blur", function() {
      checkRoom(FoodOrder.room);
  }, false);

您可以在行动on jsFiddle中看到您的代码，这是一个用于测试和原型化Javascript和HTML的好工具！

还要注意一些代码，这是不好的做法：

setTimeout("formClock()",1000) ;

It is never a good idea to pass a string to setTimeout。您可以传递一个函数对象：

setTimeout(formClock, 1000);

Answer 2

这是因为你正在调用你的函数

validateForm(FoodOrder)

立即将结果分配给活动

如果上面的函数返回另一个函数会没有问题，但情况并非如此

所以只需将它包装在另一个函数中：

submit.addEventListener("click", function() { validateForm(FoodOrder) }, false);

您还应该使用load替换DOMContentLoaded事件，以便更早地附加您的活动

但最好使用jQuery：

$(function() {
    $('#clock').mouseover(formClock);
    $('#submit').click(function() { validateForm(FoodOrder) });
    $('#room').blur(function() { checkRoom(FoodOrder.room) });
}

JavaScript EventHandlers调用load

2 个答案: