2015-09-13 10 views
0

моего яваскрипта кода не работает мою страницу, хотя работает 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> 

и это мой яваскрипта код

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() будет запускаться только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript. Код, включенный внутри $ (window) .load (function() {...}), будет запускаться после того, как будет готова вся страница (изображения или фреймы), а не только DOM.

https://learn.jquery.com/using-jquery-core/document-ready/ Взятые из

Смежные вопросы