Here is an approximate analogue of the calculator . The order of this I enter the numbers in the input I get the amount of the formula without a button. I can not understand why it does not display the value of the Jquery variable in the span, what could be the problem?
function calculate() { var width = $('#width').val(); var height = $('#height').val(); var S = width * height; var total = width * height * 2500; var newTotal = Math.round(total); $('#fc_priceValue').html(newTotal); }
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Калькулятор</title> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="calculator"> <div class="goup_param"> <label>Ширина: <input type="text" class="form_price" name="width" id="width" value="" placeholder="0" /> </label> <br /> <br /> <label>Высота: <input type="text" class="form_price" name="height" id="height" value="" placeholder="0" /> </label> <br /> <br /> <label>Выбирите материал</label> <br /> <select> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </div> <div class="total"> <span id="fc_priceValue"></span> ₽ <span id="fc_square" class="field">/ <span id="fc_squareValue">100</span> <span id="fc_squareMeas">м</span><sup>2</sup> </span> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </div> </body> </html>