Question

I am learning javascript, and am trying to adjust the following:

$('#myform').change(function() {
    if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }
});

To be a a function with a name that I can call on different events, such as page load etc.

I don’t yet fully understand each element, but I know that:

    if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }

is the core “logic” of the function: if (condition) {then this} else {that}

and more or less understand what is happening there. Which leaves the bounding javascript (is there better terminology than that?):

$('#myform').change(function() {...});

My Questions (are the following true etc):

• The dollar I think denotes that it is jQuery
• The id my form obviously
  pertains the script to events within that form (namespace?)
• .change seems to be, a trigger that listens to … any change taking place
  within #myform? so every time a change happens within #myform this
  runs? That seems inefficient
• function() I don’t yet understand what
  an anonymous or empty function does, just defines what is contained
  in {} as a function?

My goal: to be able to have something like

function myfunction()
{
if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }
}

and then

$(function() {myfunction});

so I can call that function on page load, but I don’t wan’t to loose the functionality the .change syntax is providing me (that it changes as the user interacts with the elements on the page also.

Apologies for the general and cumbersome levels of ignorance

Answer 1

You guessed how to define the function correctly — that is,

function myfunction()
{
if ($('#sv_I4b').attr('checked')||$('#sv_I4c').attr('checked')){
        $('#sv_I5').removeClass('hidden');
    } else {
        $('#sv_I5').addClass('hidden');
    }
}

works just fine. However, this:

$(function() {myfunction});

Should be written as:

$(myfunction);  // Run on page load.
$('#myform').change(myfunction);  // ...and also run it when the form changes.

However, that second line won’t actually work until the page has loaded unless the form exists at the time the script runs, so you may want to change it to this:

$(function() {  // On page load, run this anonymous function:
    myfunction();  // Run the function now (where now, at this point, is page load).
    $('#myform').change(myfunction);  // ...as well as when the form changes.
});