0

と で構成される入力を含む多くのセクションがある HTML ページがRadioButtonsありCheckBoxます。それらの最初のものは次のようなものです:

<div  style="margin-top: 30px; height: 270px;">
    <input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/>True<br/>
    <input type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>

最終入力の後、各入力を探して、正解がチェックされていることを調査しています。このジョブを実行しているスクリプトの部分は次のとおりです。

var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
   var ele =  document.getElementById(ansList[k]);
   result = result & ele.checked ;
}

thisFrameこの繰り返しの場所は ですreplaceAble1ansList[k]デバッグすると、 ieで正しい要素 ID を取得していることは明らかですAnswer1。ここでの問題は、毎回、Answer1がチェックされているかどうかele.checkedが返されているかどうかfalseです。その理由は何ですか?

アップデート:

完全なコードを入れたほうがいいと思います。だからここにあります:

<div id="replaceAble1">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q 
        <span id ="question1">Do you live in Pakistan?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/>True<br/>
        <input type="radio" name="Answers" title="False" onclick="setAnswered();" />False
    </div>
    <div id="replaceAble1_a" style="display: none;">Answer1</div>
    <div id="replaceAble1_n" style="display: none;">null</div>
</div>
<div id="replaceAble2" style="display: none;">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q. 
        <span id ="question2">Do you go for cycling daily?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input type="radio" name="Answers" title="True" onclick="setAnswered();" />True<br/>
        <input id="Answer2" type="radio" name="Answers" title="False" onclick="setAnswered();" />False
    </div>
    <div id="replaceAble2_a" style="display: none;">Answer2</div>
    <div id="replaceAble2_n" style="display: none;">null</div>
</div>
<div id="replaceAble3" style="display: none;">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q 
        <span id ="question3">When Do you Sleep?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input id="notAnswer1" type="checkbox" name="Answers" title="True" onclick="setAnswered();"/>Morning<br/>
        <input id="notAnswer2" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Evening<br/>
        <input id="Answer3" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Night                        
    </div>
    <div id="replaceAble3_a" style="display: none;">Answer3</div>
    <div id="replaceAble3_n" style="display: none;">notAnswer1,notAnswer2</div>
</div>
<div id="replaceAble4" style="display: none;">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q 
        <span id ="question4">What Do you Eat?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input id="Answer4" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Launch<br/>
        <input id="Answer5" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Break Fast<br/>
        <input id="Answer6" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Dinner<br/>
    </div>
    <div id="replaceAble4_a" style="display: none;">Answer4,Answer5,Answer6</div>
    <div id="replaceAble4_n" style="display: none;">null</div>
</div>

スクリプトは次のとおりです。

var i = 0;
var answered = false;
var score = 0;
var unitScore = 5;
var totalScore = 20;
var frameList = ["replaceAble1", "replaceAble2", "replaceAble3", "replaceAble4"];
function setAnswered() {
    answered = true;
}
function displayAnswer(isTimeUp) {
    var Message;
    var j;
    if (isTimeUp) {
        Message = "Times Up";
    } else {
        Message = "Quiz End";
    }

    for (j = 0; j < frameList.length; j++) {
        var result = true;
        var thisFrame = frameList[j];
        var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
        for (var k = 0; k < ansList.length; k++) {
            var ele =  document.getElementById(ansList[k]);
            result = result & ele.checked ;
        }
        ansList = document.getElementById(thisFrame + "_n").innerHTML.split(",");
        for (var k = 0; k < ansList.length; k++) {
            if (ansList[k] !== "null")
                result = result & (!document.getElementById(ansList[k]).checked);
        }
        if (result) {
            score = Number(score) + Number(unitScore);
        }
    }
    document.getElementById("QuestionPan").style.display = "none";
    document.getElementById("resultPan").style.display = "block";
    document.getElementById("message").innerHTML = Message;
    document.getElementById("totalMarks").innerHTML = totalScore;
    document.getElementById("score").innerHTML = score;
    var timetaken = count - document.getElementById("time").innerHTML;
    document.getElementById("timetaken").innerHTML = timetaken + " minutes";
}
function submition() {
    if (!answered) {
        alert("Please select at least one Answer for this question.");
        return;
    }
    if (i === (frameList.length - 1)) {
        displayAnswer(false);
        return;
    }
    document.getElementById(frameList[i++]).style.display = "none";
    document.getElementById(frameList[i]).style.display = "block";
    document.getElementById("counter").innerHTML = (Number(i) + 1) + '/' + frameList.length;
    answered = false;
}

最初の答えだけがAnswer1この問題を引き起こしています。他のすべては正常に機能しています。

4

2 に答える 2

2

おそらく、ビット単位の演算&&子ではなく、ブール演算子を使用する必要があります&

result = result && ele.checked;

これは の以前の値にも依存しますresult。この段階では、これがあなたの問題であるかどうかは完全にはわかりません。

アップデート

問題を再現できません。http://jsfiddle.net/QA26Q/を参照してください

私の他の唯一の考えは、この例に示すように、同じ ID を持つ複数のラジオ ボタンがあることです - http://jsfiddle.net/QA26Q/1/

于 2013-09-27T03:48:46.757 に答える
0

問題が発生しました。問題は JavaScript ではなく HTML にありました。誤ってnameすべての入力のフィールドを同じに設定してしまいましたAnswer。したがって、すべての のすべてのラジオ ボタンがreplaceable div同じグループに属していました。そのため、ラジオボタンのを設定するAnswer2とリセットされます。目に見えないので、このバグを追跡できませんでした。だから単純にhtmlをreplaceable2replaceable1

<div id="replaceAble1">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q 
        <span id ="question1">Do you live in Pakistan?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input id="Answer1" type="radio" name="Answers1" title="True" onclick="setAnswered();"/>True<br/>
        <input type="radio" name="Answers1" title="False" onclick="setAnswered();" />False
    </div>
    <div id="replaceAble1_a" style="display: none;">Answer1</div>
    <div id="replaceAble1_n" style="display: none;">null</div>
</div>
<div id="replaceAble2" style="display: none;">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q. 
        <span id ="question2">Do you go for cycling daily?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input type="radio" name="Answers2" title="True" onclick="setAnswered();" />True<br/>
        <input id="Answer2" type="radio" name="Answers2" title="False" onclick="setAnswered();" />False
    </div>
    <div id="replaceAble2_a" style="display: none;">Answer2</div>
    <div id="replaceAble2_n" style="display: none;">null</div>
</div>
<div id="replaceAble3" style="display: none;">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q 
        <span id ="question3">When Do you Sleep?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input id="notAnswer1" type="checkbox" name="Answers3" title="True" onclick="setAnswered();"/>Morning<br/>
        <input id="notAnswer2" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" />Evening<br/>
        <input id="Answer3" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" />Night                        
    </div>
    <div id="replaceAble3_a" style="display: none;">Answer3</div>
    <div id="replaceAble3_n" style="display: none;">notAnswer1,notAnswer2</div>
</div>
<div id="replaceAble4" style="display: none;">
    <span  style="font-size: 14pt ;margin-top: 5px;">Q 
        <span id ="question4">What Do you Eat?</span>
    </span>
    <div  style="margin-top: 30px; height: 270px;">
        <input id="Answer4" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Launch<br/>
        <input id="Answer5" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Break Fast<br/>
        <input id="Answer6" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Dinner<br/>
    </div>
    <div id="replaceAble4_a" style="display: none;">Answer4,Answer5,Answer6</div>
    <div id="replaceAble4_n" style="display: none;">null</div>

そして、それは適切に機能しました。

于 2013-10-01T07:05:45.493 に答える