2

このメソッドを使用して、変数を次の関数に渡してみました:

function a(form, ctr) {
var a = form;
var b = ctr;
b(ctr);
} 

function b(ctr) {
var b = ctr;
}

ajaxでPOSTメソッドを使用しているため、正確なコードははるかに複雑です。関数aはクリック時に開始され、フォームとctrパラメーターの両方を使用します-次に、ctrのみを必要とする関数bに移動します-ただし、このメソッドを渡す変数は機能していません。より良い解決策はありますか？

function updateQuestion(form, ctr) { 
console.log("Called updateQuestion");
var str1 = "toggleDiv";
var str2 = ctr;
var id = str1.concat(str2);
var divVar = document.getElementById(id);
console.log(divVar);
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(XMLHttpRequestObject) {
  console.log("XMLHttpRequestObject = TRUE");

var myVar = form.create_mcq_question.value;
  console.log("MyVar = " + myVar);
    var formQuestion = document.getElementById("formQuestion");
    console.log("1");
    XMLHttpRequestObject.open("POST","hiddent",true); 
        console.log("2");
    XMLHttpRequestObject.onreadystatechange  = handleServerResponse;
        console.log("3");
    XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        console.log("4" + document.getElementById("create_mcq_question").value);

        var mcqid;
        var mcqQuestion;
        var mcqAnswerCorrect;
        var mcqAnswerWrong1;
        var mcqAnswerWrong2;
        var mcqAnswerWrong3;
        var mcqExplanation;

        var error = 0;

        if (form.create_mcq_question.value == "" || form.create_mcq_question.value == null  ) {
        error = 1;
        }
        else {
        mcqQuestion = form.create_mcq_question.value
        }
        if (form.create_mcq_answer_correct.value == "" || form.create_mcq_answer_correct.value == null) {
        mcqAnswerCorrect = "";
        error = 1;
        }
        else {
        mcqAnswerCorrect = form.create_mcq_answer_correct.value
        }
        if ((form.create_mcq_answer_wrong1.value == "" || form.create_mcq_answer_wrong1.value == null) && (form.create_mcq_answer_wrong2.value == "" || form.create_mcq_answer_wrong2.value == null) && (form.create_mcq_answer_wrong3.value == "" || form.create_mcq_answer_wrong3.value == null)) {
        error = 1;
        }

        if (form.create_mcq_answer_wrong1.value == "" || form.create_mcq_answer_wrong1.value == null) {
        mcqAnswerWrong1 = "";
        }
        else {
        mcqAnswerWrong1 = form.create_mcq_answer_wrong1.value
        }
                if (form.create_mcq_answer_wrong2.value == "" || form.create_mcq_answer_wrong2.value == null) {
        mcqAnswerWrong2 = "";
        }
        else {
        mcqAnswerWrong2 = form.create_mcq_answer_wrong2.value
        }
                if (form.create_mcq_answer_wrong3.value == "" || form.create_mcq_answer_wrong3.value == null) {
        mcqAnswerWrong3 = "";
        }
        else {
        mcqAnswerWrong3 = form.create_mcq_answer_wrong3.value
        }

                if (form.create_mcq_explanation.value == "" || form.create_mcq_explanation.value == null) {
        mcqExplanation = "";
        }
        else {
        mcqExplanation = form.create_mcq_explanation.value
        }
        if (error == 0) {
    XMLHttpRequestObject.send("create_mcq_question=" + mcqQuestion +
                              "&create_mcq_correct_answer=" + mcqAnswerCorrect + 
                              "&create_mcq_wrong_answer1=" + mcqAnswerWrong1 + 
                              "&create_mcq_answer_wrong2=" + mcqAnswerWrong2 + 
                              "&create_mcq_answer_wrong3=" + mcqAnswerWrong3 + 
                              "&create_mcq_explanation=" + mcqExplanation +
                              "&mcqid=" + mcqid ); 
                                console.log("5");
                                handleServerResponse(ctr);
                                }
                                else {
                                document.getElementById("divVar").innerHTML="Cannot update question - please ensure all required fields are filled!";
                                }
  }


}

function handleServerResponse(ctr) {
var str1 = "toggleDiv";
var str2 = ctr;
var id = str1.concat(str2);
var divVar = document.getElementById(id);
console.log("Handle server response called");
if (XMLHttpRequestObject.readyState == 1) {
console.log("Loading");
 document.getElementById(divVar).innerHTML="<img src=\"hidden">";
}

   if (XMLHttpRequestObject.readyState == 4) {
   console.log("4");
     if(XMLHttpRequestObject.status == 200) {
       document.getElementById(divVar).innerHTML=XMLHttpRequestObject.responseText; //Update the HTML Form element
       console.log("divVar found");
       console.log(divVar); 
     }
     else {
       document.getElementById(divVar).innerHTML="There was a problem updating your question - please try again!"; //Update the HTML Form element 
       console.log("divVar not found");
       console.log(divVar); 
     }
   }
}

そして、すべてを開始するボタン:

<input type="button" value="Update My Question!" onclick="updateQuestion(this.form,<?php echo" $ctr"; ?>)">

最初の関数の動作を示す Firebug と、変数を取得しない 2 番目の関数の呼び出し:

[02:21:42.106] Called updateQuestion
[02:21:42.106] [object HTMLDivElement]
[02:21:42.106] XMLHttpRequestObject = TRUE
[02:21:42.106] MyVar = Gram- bacteria are stained purple with gram staining, while gram+ bacteria are stained pink.
[02:21:42.106] 1
[02:21:42.107] 2
[02:21:42.107] 3
[02:21:42.107] 4Gram- bacteria are stained purple with gram staining, while gram+ bacteria are stained pink.
[02:21:42.108] Handle server response called
[02:21:42.108] Loading
[02:21:42.108] 5
[02:21:42.108] Handle server response called
[02:21:42.109] Loading
[02:21:42.649] Empty string passed to getElementById(). @ hidden
[02:21:42.649] TypeError: document.getElementById(...) is null @ hidden
[02:21:42.647] Handle server response called
[02:21:42.648] 4
4

2 に答える 2

2

以下は実際には意味がありません。

var b = ctr;
b(ctr);

ここでは、変数bが関数として扱われ、呼び出され、それ自体への参照をパラメーターとして渡します。それは本当に私たちの意図ですか？

編集：追加情報があれば、問題は簡単に説明できます。ログを見ると、handleServerResponse が数回呼び出されていることがわかります。初めて「ctr」が期待どおりに渡されます。

問題はここにあります：

XMLHttpRequestObject.onreadystatechange  = handleServerResponse;

これによりコールバックが設定され、コールバックはもちろん「ctr」なしで関数を呼び出します。これが、コードが実行される理由です。クロージャーが使用されるように、無名関数を使用できます。

XMLHttpRequestObject.onreadystatechange = function() { handleServerResponse(ctr); };

JavaScript: The Good Parts by Crockford を読むと、JS コーディングを大幅に改善するのに役立つと思います。

于 2012-12-27T02:14:50.277 に答える
2

関数スコープ内に「b」という変数が既に存在します。そのため、エラーが発生します。それらがグローバル関数である場合は、次を使用できます。

function a(form, ctr) {
    var a = form;
    var b = ctr;
    window.b(ctr);
} 

function b(ctr) {
    var b = ctr;
}
于 2012-12-27T02:18:52.490 に答える