Блог

У меня очень большая форма, в которой есть входные данные и обычные деления с классом «calcsum». Входные данные заполняются пользователем, а деления являются результатом вычислений, которые выполняются с помощью кнопки ввода и функции click ().

Теперь я хотел бы суммировать все входные данные и divs, когда они имеют значение. Но я не могу заставить скрипт считывать все значения.

 $('#calculate').click(function() {
    var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){;
        console.log(Number($(this).val()));
        amount_sum  = Number($(this).val());
    });
    $('#amount_worth').html(amount_sum);
});
  

Это работает с обычными полями ввода, но значения из divs игнорируются. Я пробовал несколько других способов с помощью val(), но ни один из них не работает. Я не понимаю, почему значения из divs игнорируются. Пожалуйста, помогите … 🙁

Вот примеры из HTML:

 <tr>
    <td colspan="3">Bargeld</td>
    <td><input type="text" name="cash" value="" id="amount_1" class="calcsum notice" title="Istwert eingeben"/></td>
    <td><div class="style_calculated" id="nextam_1"></div></td>
</tr> 
  

И здесь div:

 <tr>
    <td colspan="2"><b>Bestandswert Gesamt:</b></td>
    <td><input type="button" name="bestandswert" id="calculate_goods" value="Berechnen" /></td>
    <td><div class="style_calculated calcsum" id="tradegoods" id="amount_14"></div></td>
    <td><div class="style_calculated nextsum" id="next_tradegoods"></div></td>
</tr>
  

(Второе поле с next на данный момент не актуально, это появится позже)

Во втором примере html вы можете видеть, что отсутствует div с tradegoods. Значение будет заполнено после нажатия на «calculate_goods» .. вам также нужен пример сценария?

Вы не можете получить доступ к содержимому Div с помощью $(this).val() . Вместо этого вам нужно либо использовать $(this).html(), либо $(this).text(), чтобы получить значение, сохраненное внутри Div.

Причина div , по которой теги игнорируются, заключается в том, что .val() он не читает текст div.

Вам нужно будет изменить свой код, чтобы проверить наличие .text() div:

 $('.calcsum').each(function(){;
    value = ($(this).is("input")) ? Number($(this).val()) : Number($(this).text());
    amount_sum  = value;
    console.log(value);
})
  

Проверьте div , не прочитано ли оно .text() в противном случае .val() .

 $('#calculate').click(function() {
    var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){;
        var value = $(this).is('div')?$(this).text():$(this).val();
        console.log(Number(value ));
        amount_sum  = Number(value );
    });
    $('#amount_worth').html(amount_sum);
});
  

Попробуйте следующий код, он может решить вашу проблему,

Ваш сценарий, подобный этому,

 $(document).ready(function () {
        $('#calculate').click(function () {
            var amount_sum = 0;
            //calculate total worth of money
            $('.add').each(function () {;
                amount_sum  = Number($(this).val());
            });
            $('#amount_worth').html(amount_sum);
        });
    });
  

Ваша таблица стилей выглядит следующим образом,

 .add {
        width:100px;
    }
  

ваша форма выглядит так,

 <form id="frm">
<input type="text" class="add" id="1" />
<input type="text" class="add" id="2"/>
<input type="text" class="add" id="3"/>
<input type="text" class="add" id="4"/>
<input type="button" value="Add" id="calculate" />
<div id="amount_worth"></div></form>
  

Проверьте эту рабочую скрипку

HTML:

 <input type="text" class="calcsum" value="1">
    <input type="text" class="calcsum" value="2">
        <input type="text" class="calcsum" value="3">

            <div class="calcsum">4</div>
            <div class="calcsum">5</div>
            <div class="calcsum">6</div>
  

JS:

 var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){
        //console.log($(this));
        //checks whether the DOM element is an input element or a div
        if(this.tagName.toLowerCase() == "input")
        {
            amount_sum  = Number($(this).val());
        }
        else if(this.tagName.toLowerCase() == "div")
        {
            amount_sum  = Number($(this).html());
        }
        console.log(Number($(this).val()));
    });

alert(amount_sum);