为什么我的JavaScript代码不起作用

Question

我的javascript代码不工作我的页面虽然工作Codepen

并且在这里也有效，当您在这四个字段中输入数字时，它会相乘并起作用，但是在我的本地主机和主机中不起作用，它不会显示相乘的数字

这是我的HTML代码

    <html >
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="live_calc.js"></script>
    </head>
    <body>
            <div class="row">
                <div class="col-md-12">
                <h3>Dimensionals </h3>
                <div class="form-inline" >
                    <div class="form-group col-md-3">
                        <label class="control-label " for="Units">Units :</label>
                        <input type="text" class="form-control " id="Units" placeholder="3" >
                        <label class="control-label " for="Volumetric weight" >Volumetric weight : <span id="result"></span></label>
                    </div>
                    <div class="form-group col-md-3">
                        <label class="control-label" for="Length">Length :</label>
                        <input type="text" class="form-control "  min="0" step="0.01" id="Length" placeholder="10" >
                    </div>
                    <div class="form-group col-md-3">
                        <label class="control-label" for="Width">Width :</label>
                        <input type="text" class="form-control" id="Width" placeholder="10" >
                    </div>
                    <div class="form-group col-md-3">
                        <label class="control-label" for="Height">Height :</label>
                        <input type="text" class="form-control  " id="Height" placeholder="10" >
                    </div>
                </div>
            </div>
            </div>
    </body>
    </html>

这是我的JavaScript代码

    var multiplyShares = function() {
    var val1 = parseFloat($('#Units').val())
    var val2 = parseFloat($('#Length').val())
    var val3 = parseFloat($('#Height').val())
    var val4 = parseFloat($('#Width').val())

    val5 = val1 * val2 * val3 * val4|| "ERROR"
    $("#result").html(val5)
}

$("#Units").keyup(function() { multiplyShares(); });
$("#Length").keyup(function() { multiplyShares(); });
$("#Height").keyup(function() { multiplyShares(); });
$("#Width").keyup(function() { multiplyShares(); });

Answer 1

用$(document).ready(function() { });包装您的jQuery代码$(document).ready(function() { }); 处理程序。 你也可以简化你的代码

$(document).ready(function() {
  var multiplyShares = function() {
    var val1 = parseFloat($('#Units').val())
    var val2 = parseFloat($('#Length').val())
    var val3 = parseFloat($('#Height').val())
    var val4 = parseFloat($('#Width').val())    
    val5 = val1 * val2 * val3 * val4 || "ERROR"
    $("#result").html(val5)
  }

  $("#Units,#Length,#Height,#Width").keyup(multiplyShares);
})

在文档“就绪”之前，无法安全地操纵页面。 jQuery为您检测到这种就绪状态。 $（document）.ready（）内包含的代码仅在页面Document Object Model（DOM）准备好执行JavaScript代码后才能运行。 一旦整个页面（图像或iframe）（不仅是DOM）准备就绪，$（window）.load（function（）{...}）中包含的代码将运行。

取自https://learn.jquery.com/using-jquery-core/document-ready/

为什么我的JavaScript代码不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-13 16:50:54

为什么我的JavaScript代码不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-13 16:50:54

解决方案1
1 已采纳 2015-09-13 16:50:54