Как использовать функцию onchange с выпадающим списком и общей суммой в HTML / JavaScript

Question

В настоящее время я застрял в корзине покупок, такой как HTML-сайт, на котором элементы создаются динамически.Я хочу, чтобы сумма одного элемента и общая сумма обновлялись, когда выпадающий список выбирается до определенного значения.Я попробовал это с функцией onchange, но это не сработало.Что я делаю не так и есть ли способ обновить суммы вообще?

Код JavaScript следующий:

    $( document ).ready(function() {

        console.log("BEREIT ZUM SOP");
        var sum = 0;

        // artikel in von session holen über sbservice
            $.ajax({
                url: "http://localhost:8080/HandyHammer/rest/shoppingbasket",
                method: "GET",
                dataType: "json" 
            })
            .done(function(responseData) {
                console.log(responseData);
                for(var i=0;i<responseData.length;i++){
                    var data1=responseData[i];
                    console.log("sarajevo");
                    console.log("istanbul");
                    console.log(data1);
                var prc= data1.price;
                sum = sum + prc;  //addiere summe
                console.log(sum);
                var tmp = '<tr> <td id="warenid">'+data1.id+'</td> <td id="Bezeichnung">'+data1.title+'</td>  <td id="preis">'+prc+'€</td> <td><select id="menge" name="maximum10">';
                tmp += '<option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option>';
                tmp += '<option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option>';
                tmp += '</select></td><td id="summe">'+prc+'</td> <td><a id="removeBestellung" class="btn1" type="button"><i class="fa fa-trash" aria-hidden="true"></i></a> </td>'; //removebestellung kommt später DONT FORGET
                tmp += '</tr>';
                $("#upper").after(tmp);
                }





            var select = document.getElementById("menge");      
               select.onchange = function() {
                   var answer = select.options[select.selectedIndex].value;
                   console.log("Wert der Dropdown   "+answer);
                  var summe = document.getElementById("summe").innerHTML;
                  console.log("wert der SUMME Yeet    " + summe*answer);
                  var oldval = summe;
                  var newval = summe*answer;
                  var diff = newval - oldval;
                  document.getElementById("summe").innerHTML = newval;
               }

                var onsumme = document.getElementById("summe");
                console.log("sum 1  " + sum);
                console.log("summe element  " + onsumme);
                    onsumme.onchange = function() {
                        console.log("diff variable   " + diff);
                    sum += diff;
                    console.log("sum funktion  " + sum);
                    $(".total").append(sum+"€");
                    }

            })
            .fail(function( errorResponse, statusText, error ) {    // fehlerfall
                alert(errorResponse.responseText);
            });


                /*  $("#menge").change(function(){
                      console.log("change funktion aufgerufen  " + sum);
                     var select = document.getElementById("menge");
                     var answer = select.options[select.selectedIndex].value;
                     console.log(answer);
                     var x = document.getElementById("sume").textContent;
                     document.getElementById('summe').textContent = x * answer ;
                  }); */
    });
    </script>


    </body>
    </html>

Answer 1

У вас проблема, потому что тип summe не является целым числом.Вы можете преобразовать его в целое число, используя

var summe = parseInt(document.getElementById("summe").innerHTML);

Answer 2

Используя приведенное ниже событие Select onChange Jquery, вы можете получить значение, даже если вы измените значение параметра select.

 $( "select" ).change(function() {
    selectedValue= parseInt$(this).val());
    selectedValue + (X number);
    alert( selectedValue + (X number));
  });

в приведенном выше сценарии выбранное значение будет сохранено в selectedValue переменная, так что вы можете добавить значение с той же переменной.

Ссылка для справки: https://jsfiddle.net/5dbx80f3/6/