Web page javascript not executing at all

Question

I'm developing a calculator for my website, but when the user inputs the numbers nothing executes. Not even a pop up window. This probably means that the script isn't executing properly. Any help would be greatly appreciated.

HTML :

        <!-- Form Name -->
        <div class="row">
            <div class="col col-sm-6 text-center">
                <h1><a href="#" title="scroll down for your viewing pleasure">Wilks Calculator</a>
                <p class="lead">Find your Wilks value to determine your strength relative to your bodyweight.</p>
                </h1>
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="bodyweight">Bodyweight</label>  
            <div class="col-md-4">
                <input id="bodyweight" name="bodyweight" type="text" placeholder="150" class="form-control input-md">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="liftedweight">Lifted weight</label>  
            <div class="col-md-4">
                <input id="liftedweight" name="liftedweight" type="text" placeholder="500" class="form-control input-md">
            </div>
        </div>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="gender">Gender</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="gender-0">
                    <input type="radio" name="gender" id="gender-0" value="1" checked="checked">
                    Male
                </label> 
                <label class="radio-inline" for="gender-1">
                    <input type="radio" name="gender" id="gender-1" value="2">
                    Female
                </label>
            </div>
        </div>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="unit">Unit</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="unit-0">
                    <input type="radio" name="unit" id="unit-0" value="1" checked="checked">
                    lbs
                </label> 
                <label class="radio-inline" for="unit-1">
                    <input type="radio" name="unit" id="unit-1" value="2">
                    kgs
                </label>
            </div>
        </div>

        <!-- Button -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="submit"></label>
            <div class="col-md-4">
                <button type="submit" id="findValue" class="btn btn-primary">Submit</button>
            </div>
        </div>


        <div class="form-group">
            <label class="col-md-4 control-label" for="result">Wilks Value</label>  
            <div class="col-md-4">
                <p class="form-control-static bold"><span id="result" style="font-size: 1.5em"></span></p>
            </div>
        </div>

    </fieldset>
</form> 

Script :

$(document).ready(function () {
    $("#bodyweight").focus();
});

$(".submits").keyup(function (enter) {
    if (enter.keyCode == 13) {
        wilks();
    }
});

$("#findValue").click(function (enter) {
    enter.preventDefault();
    wilks();
});

function wilks(){
    //Get value of gender input
    var gen = $('input[name="gender"]:checked').val();

    //Get value of unit of measurement input
    var unit = $('input[name="unit"]:checked').val();

    //Get bodyweight value
    var bWeight = $('#bodyweight').val();

    //Get amount of weight lifted
    var lWeight = $('#liftedweight').val();

    //Declare wilks value variable
    var wilks = 0;


    if (gen == 1) {

        //Coefficients for men
        a=-216.0475144;
        b=16.2606339;
        c=-0.002388645;
        d=-0.00113732;
        e=7.01863E-06;
        f=-1.291E-08;

    } else if(gen == 2){  

        //Coefficients for women
        a=594.31747775582;
        b=-27.23842536447;
        c=0.82112226871;
        d=-0.00930733913;
        e=0.00004731582;
        f=-0.00000009054;

    }

    //Convert pounds into kilograms
    if(unit == 1) {
        (bWeight / 2.20462262).toFixed(2);
        (lWeight / 2.20462262).toFixed(2);
    }


    //Calculate wilks value
    wilks = lWeight*(500/(a+(b*bWeight)+
            (c*Math.pow(bWeight,2))+
            (d*Math.pow(bWeight,3))+
            (e*Math.pow(bWeight,4))+
            (f*Math.pow(bWeight,5)))); 

    //Round Wilks to 4 places
    wilks = wilks.toFixed(4);

    $("#result").html(wilks);

}

Answer 1

aside from making sure your jquery is available before calling the $ function, you also need to prefix any variable declarations with var. I can see 12, 6 male co-efficients and 6 female coefficients in the wilks() function.

This will stop your script running.

Try adding the line var a,b,c,d,e,f; at the start of the function so that those variables are available to be assigned. You can define multiple variables with one var statement and without initialising them immediately.

Apart from that the function executes here when isolated from the html and jquery.

Next, you'll probably find it easier if you assign classes just for JavaScript directly to your form elements, with id='js-gender-input' and $('#js-gender-input).val() - it's just clearer and easier to make sure that the match up is present between html and js.

And also, make sure jquery is loaded before you use it, as the other guys say!

Answer 2

You need to bind events once JavaScript can find all elements.

So put your event bindings in .ready()

$(document).ready(function () {
    $("#bodyweight").focus();

    $(".submits").keyup(function (enter) {
        if (enter.keyCode == 13) {
            wilks();
        }
    });

    $("#findValue").click(function (enter) {
        enter.preventDefault();
        wilks();
    });

});

Answer 3

When using jQuery to bind event listeners to elements, they need to have been loaded first. Put the handlers like .click and .keyup within the $(document).ready handler, or put the script at the end of the body element so its only run once the page is loaded.