Why my javascript code doesn't work

Question

my javascript code not working my page although working Codepen

and here also work , when you enter numbers in this four fields it multiplies it and working but it doesn't work in my localhost and my hosting , It doesn't display the multiplied number

This my HTML code

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

and this my javascript code

    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(); });

Community · Accepted Answer · 2020-06-20 09:12:55Z

Wrap your jQuery code with $(document).ready(function() { }); handler. Also you can simplify your code

$(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);
})

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Taken from https://learn.jquery.com/using-jquery-core/document-ready/

Collectives™ on Stack Overflow

Why my javascript code doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related