Why isn't this jquery code executing?

Question

I don’t think the code in the $(document).ready(); is executing; neither of the elements show up. I've declared the button and text earlier on and know it works from previous test. I think I have sort of an idea -- the $(document).ready(); executes at pageload, not after the main();. But, I don't understand why the code inside the submit click handler wouldn’t execute and show the necessary elements, anyway.

EDIT: Console output said that the number variable was undefined.

question is a bunch of JSON, which is also known working...

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
function main()
{
var number = randomIntFromInterval(1,4);
$("#main").html('<br>' + questions[number]["Question"] + '<br>' + '<form action="" id="questionblock">' + '<input type="radio" name="choice" value="Choice1">' + questions[number]["Choice1"] + '<br>' + '<input type="radio" name="choice" value="Choice2">' + questions[number]["Choice2"] + '<br>' + '<input type="radio" name="choice" value="Choice3">' + questions[number]["Choice3"] + '<br>' + '<input type="radio" name="choice" value="Choice4">' + questions[number]["Choice4"] + '<br>' + '</form>');
}
main();
$(document).ready(function(){
  $("#reset").hide();
  $("#submit").click(function(){
    var uc = $('input[name=choice]:checked', '#questionblock').val();
    var cc = questions[number]["Correct"];
    if (uc == "undefined") {
        document.write("Please choose an answer");
    } else {
      if (uc == cc) {
        $("#correct").html("Correct!");
        $("#reset").show();
      } else {
        $("#correct").html("incorrect");
        $("#reset").show();
      };
    };
  });
});

-1 due to lack of troubleshooting effort/completeness. Add what your javascript console says and I'll remove the downvote. — Gary Schreiner, May 10 '14 at 02:14
@GarySchreiner my console tells me that `number` is not defined. Could this be a problem with variable scope? — evamvid, May 10 '14 at 02:18
Yes, that sounds like the problem.. looks like you are defining number in the main() function, it's scope will end once main() ends and not be relevant inside of your submit. You need to either make it global or hold it in a hidden input or something. — Gary Schreiner, May 10 '14 at 02:20
update the question with the console info so I can remove your downvote. — Gary Schreiner, May 10 '14 at 02:28
@GarySchreiner I lost it -- after I put it in the comment, I updated the file, declaring number as global...and lost the original output. It basically said number was undefined — evamvid, May 10 '14 at 02:33
Sorry, SO won't let me remove it unless you edit the question. Just add that your console says "undefined" for variable number — Gary Schreiner, May 10 '14 at 02:52

score 2 · Accepted Answer · answered May 10 '14 at 02:26

Set your number as a global variable, then assign the global number var in main

<script>
var number;

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
function main()
{
number = randomIntFromInterval(1,4);
$("#main").html('<br>' + questions[number]["Question"] + '<br>' + '<form action="" id="questionblock">' + '<input type="radio" name="choice" value="Choice1">' + questions[number]["Choice1"] + '<br>' + '<input type="radio" name="choice" value="Choice2">' + questions[number]["Choice2"] + '<br>' + '<input type="radio" name="choice" value="Choice3">' + questions[number]["Choice3"] + '<br>' + '<input type="radio" name="choice" value="Choice4">' + questions[number]["Choice4"] + '<br>' + '</form>');
}
main();
$(document).ready(function(){
  $("#reset").hide();
  $("#submit").click(function(){
    var uc = $('input[name=choice]:checked', '#questionblock').val();
    var cc = questions[number]["Correct"];
    if (uc == "undefined") {
        document.write("Please choose an answer");
    } else {
      if (uc == cc) {
        $("#correct").html("Correct!");
        $("#reset").show();
      } else {
        $("#correct").html("incorrect");
        $("#reset").show();
      };
    };
  });
});

Why isn't this jquery code executing?

1 Answers1