Как создать итоговую сумму с помощью DOM - PullRequest
Новая
       0

Как создать итоговую сумму с помощью DOM

0 голосов
/ 05 февраля 2020

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

мой ввод HTML: <input id="valueTest1" type="text" value="0" data-price="10.99">

и мне просто нужно просто data-price для * введенного значения и затем показать в моем подытоге HTML (показано ниже)

<div id="itemTotal1" class="subtotal-price">£0.00</div>

вот моя функция .. 

function calculateSubTotal() {
    let subtotal = 0;
    for (i = 1; i <= itemTotal1; i++) {

        itemID = document.getElementById('valueTest1');
        if (typeof itemID === 'undefined' || itemID === null) {
            alert("No such item - " + "valueTest1");
        } else {
            subtotal = subtotal + parseFloat(valueTest1.value) * parseFloat(itemID.getAttribute("data-price"));
        }

    }
    console.log(valueTest1.value)
    document.getElementById('itemTotal1').innerHTML = "£" + subtotal;
}

Я могу console.log ввести (valueTest1.value) вне функции, и он показывает 0, но когда я пытаюсь console.log ввести в функцию, я ничего не получаю, любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Ваш l oop здесь избыточен - вы умножаете одно значение из элемента на другое значение из того же элемента.

Я бы go с более легким для чтения и более безопасным: 

    <body>
    <script>
        function calculateSubTotal() {
            let subtotal = 0;
            let item = document.getElementById('valueTest1');
            let itemTotal = document.getElementById('itemTotal1');

            if (typeof item === 'undefined' || item === null) {
                alert("No such item - " + " valueTest1");
            }

            let itemCount = parseFloat(item.value);
            if (!isNaN(itemCount)) {
                let itemPrice = parseFloat(item.getAttribute('data-price'));

                if (!isNaN(itemPrice )) {
                    subtotal += itemCount * itemPrice;
                }
            }

            itemTotal1.innerHTML = "£" + subtotal;
        }
    </script>

    <input id="valueTest1" type="text" value="0" data-price="10.99" onblur="javascript:calculateSubTotal()">

    <div id="itemTotal1" class="subtotal-price">£0.00</div>
</body>
1 голос
/ 05 февраля 2020

Вы должны внести некоторые изменения в файлы HTML и JS. Во-первых, вы можете сделать что-то более «универсальное» c, чтобы использовать его для каждого input и button.

HTML:

image

JS: 

function Input_ChangeValue(trigger, operation) {
  let inputChange = trigger.parentElement.querySelector("input");

  if (inputChange != null) {
    let actualValue = parseInt(inputChange.value);
    let nextValue = 0;

    switch (operation) {
      case "-":
        nextValue = actualValue - 1;
        break;
      case "+":
        nextValue = actualValue + 1;
        break;
    }

    if (nextValue <= 0) nextValue = 0; //don't allow negative numbers

    inputChange.value = nextValue;

    calculateSubTotal(inputChange);
  }
}

function calculateSubTotal(inputElement) {

  let subTotalDiv = inputElement.parentElement.parentElement.querySelector(".subtotal-price");

  if (inputElement != null && subTotalDiv != null) {
    //input found
    let qty = parseFloat(inputElement.value);
    let price = parseFloat(inputElement.getAttribute("data-price"));
    let subtotal = qty * price;

    //for debugging
    console.log(subtotal);
    subTotalDiv.innerHTML = `£${subtotal}`;
  }
}

Тем не менее есть пара проверок, которые вы должны проверить, например, input s принимает только цифры или столбец Subtotal показывает только первые 2 десятичных знака.

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...