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);

}

Can we assume you've sourced the script into the HTML document somewhere outside this example? — Mike Lyons
– Mike Lyons, Commented Feb 19, 2015 at 18:37
Can you edit your question to include the HTML elements that are in question? — TheDude
– TheDude, Commented Feb 19, 2015 at 18:37
@MikeLyons yes I included <script src="wilks.js"></script> in my <head> — Alec L. Kleyer
– Alec L. Kleyer, Commented Feb 19, 2015 at 18:40
@TheDude I included the form made in the HTML file. What else should I include I'm sorry, just confused by that. — Alec L. Kleyer
– Alec L. Kleyer, Commented Feb 19, 2015 at 18:41

Samuel Goodell · Accepted Answer · 2015-02-19 18:38:16Z

1

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.

answered Feb 19, 2015 at 18:38

Samuel Goodell

6403 silver badges10 bronze badges

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

1 Comment

Alec L. Kleyer Over a year ago

Thanks! I moved the script to the end and it worked.

Shreejibawa · Accepted Answer · 2015-02-19 18:45:16Z

0

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();
    });

});

answered Feb 19, 2015 at 18:45

Shreejibawa

1,8681 gold badge28 silver badges38 bronze badges

Comments

Toni Leigh · Accepted Answer · 2015-02-19 18:48:16Z

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!

Collectives™ on Stack Overflow

Web page javascript not executing at all

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related