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语句定义多个变量，而无需立即初始化它们。

除此之外，函数在isolated from the html and jquery时执行。

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

另外，请确保在使用之前加载jquery，正如其他人所说的那样！

网页javascript根本没有执行

3 个答案: