Trouble with input objects

Question

I'm trying to create an exercise where the user has to pick the right answer from a list of radio buttons. The "referral" radio button simply puts forth more options if the user doesn't think the initial answers are the correct ones. This javascript code is run from its own .js file and is linked to the .html page. However, when I press any radio button (input), nothing appears to happen and I can't find the problem. Anyone see anything?

NOTE: I did not put the feedback section in yet, bu

Here is the Javascript code:

//setup client case questions
    $('.clientCase input').click(function(){
        var multipleChoiceElement$ = $(this).closest('.clientCase');

        if(this.value!=="2"){ //If a button that isn't the referral is clicked
            multipleChoiceElement$.find('.feedback').show();
            multipleChoiceElement$.find('input').prop('disabled',true);
        }

        if(this.value == "1"){ //the correct answer
            multipleChoiceElement$.find('.answeredCorrectly').show();
        }
        else if(this.value=="2"){//value of 2 means its the referral
            multipleChoiceElement$.find('#clientCaseIS').show();
        }
        else{//the incorrect answer
            multipleChoiceElement$.find('.answeredIncorrectly').show();
        }       
});

Here is the relevant HTML code for the section:

  <!-- Start of multiple choice question -->
       <div class="clientCase">
         <ul class="outline">
         <div id="clientCasePIL"><strong>PIL: Primary Inspection Line</strong>
           <div class="fancyBox">
            <li><strong>1. Admission</strong></li>
            <ul style="list-style-type:none">
             <li><div class="answerOption"><label for="question1A">Verbal</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1A"> A.</div></li>
             <li><div class="answerOption">
               <label for="question1B">Stamp</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="1" id="question1B"> B.</div></li>
              <li><div class="answerOption">
                <label for="question1C">Document</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1C"> C.</div></li><p/>
             <li><div class="answerOption">
               <label for="PILRefusal"><strong>Refusal</strong></label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="PILRefusal"> 2.</div></li>
              <li><div class="answerOption">
                <label for="ISReferral"><strong>Referral</strong></label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="2" id"ISReferral"> 3.</div></li></ul>
             </div>
            </div>

        <div id="clientCaseIS"><strong>Immigration Secondary</strong>
            <div class="fancyBox">
            <li><strong>1. Admission</strong></li>
            <ul style="list-style-type:none">
             <li><div class="answerOption"><label for="question1D">Verbal</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1D"> A.</div></li>
             <li><div class="answerOption">
               <label for="question1E">Stamp</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1E">
              B.</div></li>
              <li><div class="answerOption">
                <label for="question1F">Document</label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="question1F">
              C.</div></li><p/>
              <li><div class="answerOption">
               <label for="ISRefusal"><strong>Refusal</strong></label></div>
              <div class="inputAndIdContainer"><input type="radio" name="question1" value="0" id="ISRefusal"> 2.</div></li></ul>
            </div>
          </div>
        </ul>

        <div class="feedback">
               <div class="answeredCorrectly">Correct</div>
               <div class="answeredIncorrectly">Incorrect</div>
                  <div class="answer">
                  <strong>Answer:</strong> The feedback goes here
          </div>
       </div>
        </div>

calebds · Accepted Answer · 2012-05-23 19:04:22Z

1

You probably want to wrap your function in a $(document).ready(); so that the click handler is attached to an element in the DOM:

$(document).ready(function() {

    $('.clientCase input').click(function(){
        // etc..
    });    

});

Otherwise as long as you have the correct initial styles, everything seems to be working as expected.

DEMO

answered May 23, 2012 at 19:04

calebds

26.3k9 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1410668 Over a year ago

The $(document).ready() function did it! Thanks a ton! To be honest many of my dead ends seem to be the result of that. Going to make sure I try that every time from now on.

Collectives™ on Stack Overflow

Trouble with input objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related