Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have added some explanation with the code.. </p> <pre><code>$('.myOptions').change(function () { // Remove the active class $('.list').removeClass('active'); // Add the active class // this.value holds the current value that is selected // No need to use filter $('.' + this.value).addClass('active'); }); $('#butt').click(function () { // Better to have Lesser variables , var active = $('.list.active'), $boxOne = active.find('.box1'), $boxTwo = active.find('.box2'), $boxThree = active.find('.box3'), $output = $('#output'), total = (parseInt($boxOne.val(), 10) + parseInt($boxTwo.val(), 10) + parseInt($boxThree.val(), 10)), msg = ''; $output.addClass('error'); var dropdownValue = $('.myOptions').val(), // you need to select the inputs specifically // you were trying to access it using $('input') that gives the list of all the inputs // on your page.. So you need to be more specific $genderRadio = $('input[name=gender]'); // If dropdown is empty show some message if (dropdownValue === '') { msg = 'Please select an option....'; } else if (isNaN(total)) { msg = 'Input three numbers, please...'; } // If gender is not selected show a specific message else if ($genderRadio.filter(':checked').length === 0) { msg = 'Please select your gender....'; } else { // If it comes to this statemenet it means there is no error // remove the error class $output.removeClass('error'); if (total &lt; 14) { msg = "That's bad, should be higher..."; } else if (total &gt; 15) { msg = "That's bad, should be lower..."; } else { msg = "You got it... Nice work."; } var genderPrefix = $genderRadio.filter(':checked').val() === 'Male' ? 'Sir..' : 'Miss..'; msg = genderPrefix + msg; } $output.text(msg); }); </code></pre> <p><strong><a href="http://jsfiddle.net/MVCGS/1/" rel="nofollow">Check Fiddle</a></strong></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload