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> &#8381; <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>

    1 answer 1

    There are several problems in your code at once.

    First, you use the wrong selector for the target span . Instead of $('.fc_priceValue') should be $('#fc_priceValue') .

    Secondly, it does not seem that the function calculate at least somewhere is called. You can, for example, add a small button to the form, for example:

     <button onclick="calculate()">Рассчитать</button>

    If desired, you can do without the button. For modern browsers, I would suggest using the oninput event to recalculate the final value. Here is an example:

     <input type="text" id="width" value="" oninput="calculate()" />

    Sample working code on JSFiddle.

    For reference:

    Selectors of the form .foo select elements by class , while selectors of the form #foo select elements by identifier . Judging by the above markup, you need exactly the second option.

    • I did as you say, but the result is zero. Text in the span is not displayed! The devil knows why you may need to use ready document or something like that, but I don’t know exactly how it should look like! - ggLike
    • one
      Are you sure that the function calculate at least someone calls? For example, everything works fine for me jsfiddle.net/azavff56 - Dmitriy Simushev
    • Yes, so clear! But how to do without a button, so that the calculator starts counting? onclick = "calculate ()" this solution is inappropriate. - ggLike
    • one
      @ggLike, links can only serve as a supplement . All desired behavior should be described in the question itself. - Dmitriy Simushev
    • one
      @ggLike, updated the answer - Dmitriy Simushev