2015-09-13 77 views
0

我的javascript代碼不工作我的頁面雖然工作Codepen爲什麼我的JavaScript代碼不起作用

在這裏也工作,當你在這四個字段中輸入數字乘以它和它的工作,但它不工作,我的本地和我的主機,它不顯示多倍數量

這是我的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(); }); 

回答

1

包裝你的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()中的代碼只有在頁面文檔對象模型(DOM)準備好執行JavaScript代碼時纔會運行。包含在$(window).load(function(){...})中的代碼將在整個頁面(圖像或iframe)(而不僅僅是DOM)準備就緒後運行。

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

相關問題