математическая функция с jQuery

Question

Пытаясь использовать jQuery, выполните некоторые основные математические функции.

Шаг 1. Пользователь введите вес брутто и вес тары, моя функция автоматической генерации Чистый вес, который Вес брутто минус вес тары. (Этот шаг работы)

Шаг 2. Пользователь введите Цена за фунт, мой использование функции Цена за фунт раз Сетчатый вес для расчета общей стоимости.

Пока мой код выглядит следующим образом, он возвращает чистый вес, но не возвращает общую стоимость:

<script> 
$(document).ready(function() { 
     $(".sub").focusout(function() { 
     $("#net").html(''); 
     var gross = $("#gross").val(); 
     var tare = $("#tare").val(); 
     var net = gross-tare; 
     $("#net").html(Math.round(net*1000)/1000); 
     }); 
    }); 

$(document).ready(function() { 
     $(".sub1").focusout(function() { 
     $("#total").html(''); 
     var net = $("#net").val(); 
     var ppp = $("#ppp").val(); 
     var total = net*ppp; 
     $("#total").html(Math.round(total*1000)/1000); 
     }); 
    }); 

    </script> 

И в HTML:

<input type='number' name='gross' id=gross class=sub> 
    <input type='number' name='tare' id=tare class=sub> 
    <p id=net name='net'></p> 
    <input type="number" id=ppp name="ppp" class=sub1/> 
    <p id=total name='total'></p> 

Простите меня, если я делаю глупые ошибки, поскольку я едва знаю jQuery, это всего лишь одно требование для моего проекта, над которым я работаю.

Answer 1

Несколько незначительных вещей:

- id=gross должны иметь кавычки id='gross'

- $("#net").val(); сеть не имеет значения, его p, поэтому использовать text()

-you'll хотят использование parseInt или parseFloat

Пример:

$(document).ready(function() { 
 
    $(".sub").focusout(function() { 
 
     $("#net").html(''); 
 
     var gross = $("#gross").val(); 
 
     var tare = $("#tare").val(); 
 
     var net = gross - tare; 
 
     $("#net").html(Math.round(net * 1000)/1000); 
 
    }); 
 

 
    $(".sub1").focusout(function() { 
 
     $("#total").html(''); 
 
     var net = parseInt($("#net").text()); 
 
     var ppp = parseInt($("#ppp").val()); 
 
     var total = net * ppp; 
 
     $("#total").html(Math.round(total * 1000)/1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type='number' name='gross' id='gross' class='sub'/> 
 
<input type='number' name='tare' id='tare' class='sub'/> 
 
<p id='net' name='net' class='sub1'></p> 
 
<input type="text" id='ppp' name="ppp" class='sub1'/> 
 
<p id='total' name='total'></p>

Answer 2

Поместите имена классов/идентификаторы или другие атрибуты в кавычки. Они ошибочно анализируются браузером. Проверьте использование «firebug» или «элемент проверки».

Проблема в коде: «$ („# сеть“) Вал()» Вы используете, но $.val() работает только на полях ввода, но #net является <p> тегом, поэтому получить его текст с помощью $.html().

Ваш код должен быть, как этот

HTML:

<input type='number' name='gross' id=gross class="sub"> 
<input type='number' name='tare' id=tare class="sub"> 
<p id="net" name='net'></p> 
<input type="number" id="ppp" name="ppp" class="sub1"/> 
<p id="total" name='total'></p> 

SCRIPT:

$(document).ready(function() { 
    $(".sub").focusout(function() { 
     $("#net").html(''); 
     var gross = $("#gross").val(); 
     var tare = $("#tare").val(); 
     var net = gross-tare; 
     $("#net").html(Math.round(net*1000)/1000); 
    }); 
}); 

$(document).ready(function() { 
    $(".sub1").focusout(function() { 
    $("#total").html(''); 
    var net = parseFloat($("#net").html()); 
    var ppp = parseFloat($("#ppp").val()); 
    var total = net*ppp; 
    $("#total").html(parseFloat(total)); 
    }); 
});