1

私は JavaScript の経験があまりありませんが、他の言語でプログラミングしたことがあり、すべての関数とイベント リスナーが何をするのか、その他のことを一般的に理解しています。

しかし、私は数時間課題をいじっていて、何かわからないので、Googleを使って答えを見つけようとしましたが、うまくいきませんでした.

そのため、イベントが発生したときに関数が呼び出されるようにしようとしています（「ぼかし」や「クリック」など）が、すべてのリスナーが「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>

事前に感謝します。

4

2 に答える 2

2

問題は、次のコード行にあります。

  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);

Javascript と HTML のテストとプロトタイピングに適したツールであるjsFiddleでコードの動作を確認できます。

悪い習慣であるあなたのコードのビットにも注意してください:

setTimeout("formClock()",1000) ;

に文字列を渡すことは決して良い考えではありませんsetTimeout。関数オブジェクトを渡すことができます:

setTimeout(formClock, 1000);
于 2013-11-06T08:08:20.430 に答える
1

これは、関数を呼び出しているためです

validateForm(FoodOrder)

即座に結果をイベントに割り当てます

上記の関数が別の関数を返す場合は問題ありませんが、そうではありません

したがって、次のように別の関数でラップするだけです。

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

イベントを以前に添付するには、 loadevent をに置き換える必要もありますDOMContentLoaded

しかし、使用するのが最善jQueryです：

$(function() {
    $('#clock').mouseover(formClock);
    $('#submit').click(function() { validateForm(FoodOrder) });
    $('#room').blur(function() { checkRoom(FoodOrder.room) });
}
于 2013-11-06T08:10:22.807 に答える