网页javascript根本没有执行

Question

我正在为我的网站开发一个计算器，但当用户输入数字时，什么都不执行。甚至连一个弹出窗口都没有。这可能意味着脚本执行不正确。如有任何帮助，我们将不胜感激。

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> 

脚本：

$(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

使用jQuery将事件侦听器绑定到元素时，需要先加载它们。将像.click和.keyup这样的处理程序放在$(document).ready处理程序中，或者将脚本放在body元素的末尾，使其仅在加载页面后运行。

Answer 2

一旦JavaScript能够找到所有元素，就需要绑定事件。

因此，将您的事件绑定放在.ready() 中

$(document).ready(function () {
    $("#bodyweight").focus();
    $(".submits").keyup(function (enter) {
        if (enter.keyCode == 13) {
            wilks();
        }
    });
    $("#findValue").click(function (enter) {
        enter.preventDefault();
        wilks();
    });
});

Answer 3

除了在调用$函数之前确保jquery可用外，还需要在任何变量声明前面加上var。我可以在wilks（）函数中看到12，6个男性系数和6个女性系数。

这将停止脚本的运行。

尝试在函数的开头添加var a,b,c,d,e,f;行，以便可以分配这些变量。您可以用一个var语句定义多个变量，而无需立即初始化它们。

除此之外，当与html和jquery隔离时，函数在这里执行。

接下来，如果使用id='js-gender-input'和$('#js-gender-input).val()将仅用于JavaScript的类直接分配给表单元素，您可能会发现这更容易——确保html和js之间存在匹配会更清晰、更容易。

此外，正如其他人所说，在使用jquery之前，请确保它已加载！