Код работает, только если записан внутри ввода, но не с помощью echo в цикле while

Question

Я знаю, что написанное мной название может сбить с толку, но мне трудно найти подходящий заголовок, чтобы хорошо объяснить проблему.

Я сделаю это здесь, в тексте, у меня есть код, который вычисляет С помощью входных данных и сценария выполняется математический расчет, начиная с рисунка, который написан на входе, код работает, и вы можете проверить его, скопировав и вставив

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <input required type="text" name="price" value="<?php echo $row['releprev_preventivo']; ?>" id="price" class="form-control">

<script>
    jQuery("#price").on("change paste keyup", function() {
        var price = $(this).val();
        var percent = 47;
        var percentInDecimal = percent / 100;
        var percent_two = percentInDecimal * price;
        var subtraction = price - percent_two;
        var division = subtraction / 2;
        console.log(division);
        jQuery('#importo').html(price);
        jQuery('#tasse').html(percent_two);
        jQuery('#netto_tasse').html(subtraction);
        jQuery('#res_netto_tasse').html(subtraction);
        jQuery('#result').html(division);
    });
</script>


<table>
    <tr>
        <th id="importo"></th>
        <th style="text-align: center">sottratto a</th>
        <th id="tasse"></th>
        <th>(47%)Tasse</th>
    </tr>
    <tr>
        <td id="netto_tasse"></td>
        <td>Netto tasse</td>
    </tr>
    <tr>
        <td id="res_netto_tasse"></td>
        <td>/ 2 (Diviso al 50%)</td>
    </tr>
    <tr>
        <td id="result"></td>
        <td>Guadagno</td>
    </tr>
</table>

код работает отлично, если, очевидно, мы удалим часть значения, где я выполняю эхо-результат результата, а затем записываю определенную математическую цифру, применяются последующие вычисления арифмети c, и все работает отлично, у меня возникает проблема только в том, что вместо этого я получаю эхо-результат результата, затем я открываю страницу и внутри ввода я не пишу число, но число отображается эхом, вычисление не выполняется, и я нахожусь с таблицей, лишенной данных, как я могу сделать так, чтобы ввод выполнял вычисление не написав ничего, но имея значение по умолчанию?

Answer 1

Позвоните trigger() в конце кода, чтобы вызвать событие для элемента при загрузке страницы, чтобы заставить вычисления выполняться в это время.

Также обратите внимание, что есть пара улучшений, которые вы можете сделать к коду. Во-первых, используйте событие input, поскольку оно охватывает все три события, которые вы используете сейчас. Тогда будьте осторожны с использованием строк в математических вычислениях. Вы можете избежать неприятностей в некоторых случаях из-за приведения типов, как в этом случае, но лучше, чтобы explicityl приводил ваши значения к целым числам или числам с плавающей запятой. Попробуйте это:

jQuery(function($) {
  $("#price").on("input", function() {
    var price = parseFloat($(this).val()); // or, if it's not a floating point number: parseInt($(this).val(), 10);
    var percent_two = price * 0.47; // no need to work out the percentage manually if it's hardcoded anyway
    var subtraction = price - percent_two;
    var division = subtraction / 2;

    $('#importo').html(price);
    $('#tasse').html(percent_two);
    $('#netto_tasse').html(subtraction);
    $('#res_netto_tasse').html(subtraction);
    $('#result').html(division);
  }).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input required type="text" name="price" value="100.00" id="price" class="form-control" />

<table>
  <tr>
    <th id="importo"></th>
    <th style="text-align: center">sottratto a</th>
    <th id="tasse"></th>
    <th>(47%)Tasse</th>
  </tr>
  <tr>
    <td id="netto_tasse"></td>
    <td>Netto tasse</td>
  </tr>
  <tr>
    <td id="res_netto_tasse"></td>
    <td>/ 2 (Diviso al 50%)</td>
  </tr>
  <tr>
    <td id="result"></td>
    <td>Guadagno</td>
  </tr>
</table>

Вы также можете рассмотреть возможность использования toFixed(2) в выходных значениях, если эти цифры являются ценами.