1

私はHTML5クイズに取り組んでいます. yesorの質問にラジオボタンを使用し、各ラジオボタンにornoの値を割り当て、数値を変数として保存し、すべての変数を一緒に追加してクイズを採点します.01

アップデート！！！

おい！あなたが提案した変更を加えましたが、変数を呼び出すと、まだ未定義として表示されます。

これが私のhtmlです：

<form class="answer" id="question_one">
  <input type="radio" class="styled" name="first_answer" value="1"/><!-- POSITIVE ANSWER -->
  <div class="answer_text">Yes</div>
  <input type="radio" class="styled" name="first_answer" value="0" /><!-- NEGATIVE ANSWER -->
  <div class="answer_text">No</div>
</form>

ここに私のJavaScriptがあります:

$('#question_one input:radio[name=first_answer]').on('change', function () {
var first_question = parseInt(
    $("input[name=first_answer]:checked").val()
    );

}); name=first_asnwer のラジオ ボタンのみを対象とすることで、jQuery オブジェクトにもう少し具体性を持たせようとしました。多分私は台無しにしましたか？

4

1 に答える 1

3

ここでの問題は、関数の理解だと思います$(document).ready()。この関数は、ページの依存関係 (CSS、JavaScript など) がすべて読み込まれると実行されます。

この関数が実行されるとすぐに変数が設定されます。これは、おそらく最初のラジオ ボタンをクリックする前です! ここでの解決策は、ユーザーが回答を終えた後にのみ値を計算することです。おそらく無線要素の変更イベントで -

$(document).ready(function () {
  $('input:radio').on('change',function(){
    var $first_question = parseInt($("input[name=first_answer]:checked").val());
    var $second_question = parseInt($("input[name=second_answer]:checked").val());
    $first_question = $first_question? $first_question : 0; 
    $second_question = $second_question? $second_question : 0;
    var $total_score = $first_question + $second_question;
    alert($total_score);
  });
});

ここに簡単なデモがあります

于 2013-02-05T18:59:46.830 に答える