сложение суммы двух отдельных функций

Question

(ETA: я работаю над этим для класса, и учитель хочет, чтобы все было "на входе" ... да, это раздражает: p)

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

Вот то, что у меня есть в javascript, которое дает мне два промежуточных итога: Вот важные части html:

                    <div class="qty">
                        <label for="qty">Qty</label><br>
                        <input type="number" id="qty1" placeholder="0" oninput="myCalculator()"/><br>
                        <input type="number" id="qty2" placeholder="0" oninput="myCalculatorTwo()"/><br>
                    </div>
                 
                    <div class="price">
                        <label for="price">Price</label>
                        <p>$19.99</p>
                        <p>$37.99</p>
                    </div>
                
                    <div class="subtotal">
                        <label for="subTotal">Total</label><br>
                        <span class="subTotalOne" id="subTotalOne">$</span><br>
                        <span class="subTotalTwo" id="subTotalTwo">$</span><br>
                    </div>
                 
                 
                    <div class="total">
                        <label for="total">Order Total</label><br>
                        <span class="orderTotal" id="orderTotal" oninput="orderTotal()">$</span><br>
                    </div>

Я пытаюсь добавить subTotalOne и subTotalTwo и, по сути, вывести их на orderTotal. :)

Спасибо!

Answer 1

Вместо того, чтобы запрашивать DOM в ответе Рэя - поскольку DOM-запросы обычно следует избегать, поскольку они медленные W3 Wiki , вы также можете рассмотреть возможность использования общей переменной между двумя функциями.

Также рассмотрите возможность использования чего-то другого вместо внутреннего HTML, в основном из-за эффективности why-is-element-inner html -bad-code .

var total1;
var total2;

function myCalculator() {
    var qty1 = document.getElementById('qty1').value;
    total1 = qty1 * 19.99
    document.getElementById('subTotalOne').textContent = '$ ' + total1;
}

function myCalculatorTwo() {
    var qty2 = document.getElementById('qty2').value;
    total2 = qty2 * 37.99;
    document.getElementById('subTotalTwo').textContent = '$ ' + total2;
}

function orderTotal() {
    document.getElementById('orderTotal').innerHTML = '$ ' + (total1 + total2); 
    //parentheses because '$' isn't a number so the numbers total1 and total2 will be treated like strings and joined together 
}

Answer 2

//Global variables (concidering ID is unique)
let subTotalOne, subTotalTwo, qty1, qty2, orderTotal;

const setup = () => {
    subTotalOne = document.getElementById('subTotalOne');
  subTotalTwo = document.getElementById('subTotalTwo');
  qty1 = document.getElementById('qty1');
  qty2 = document.getElementById('qty2');
  orderTotal = document.getElementById('orderTotal');
  
  myCalculator();
  myCalculatorTwo();
};

const updateTotal = (target, value) => {
    if(target == null || value == null || Number.isNaN(value)) return;
  
  target.textContent = `$ ${value.toFixed(2)}`;
  target.setAttribute('data-value', value.toFixed(2));
}
const getTotal = () => {
  if(subTotalOne == null || subTotalTwo == null) return 0;

  const [value1, value2] = [
    Number.parseFloat((subTotalOne.dataset?.value ?? 0), 10),
    Number.parseFloat((subTotalTwo.dataset?.value ?? 0), 10)
  ];
  
  if(Number.isNaN(value1) || Number.isNaN(value2)) return;
  else return value1 + value2;
};

const updateOrderTotal = () => updateTotal(orderTotal, getTotal());

const myCalculator = () => {
  const value = Number.parseFloat(qty1.value || 0, 10) * 19.99;
  updateTotal(subTotalOne, value);

  updateOrderTotal();
}

const myCalculatorTwo = () => {
  const value = Number.parseFloat(qty2.value || 0, 10) * 37.99;
  updateTotal(subTotalTwo, value);
  
  updateOrderTotal();
}

window.addEventListener('load', setup);

<div class="qty">
  <label for="qty">Qty</label><br>
  <input type="number" id="qty1" placeholder="0" oninput="myCalculator()" min="0"><br>
  <input type="number" id="qty2" placeholder="0" oninput="myCalculatorTwo()" min="0"><br>
</div>

<div class="price">
  <label for="price">Price</label>
  <p data-value="19.99">$19.99</p>
  <p data-value="37.99">$37.99</p>
</div>

<div class="subtotal">
  <label for="subTotal">Total</label><br>
  <span class="subTotalOne" id="subTotalOne">$</span><br>
  <span class="subTotalTwo" id="subTotalTwo">$</span><br>
</div>


<div class="total">
  <label for="total">Order Total</label><br>
  <span class="orderTotal" id="orderTotal" oninput="orderTotal()">$</span><br>
</div>

Answer 3

Вот как вы это делаете:

function orderTotal() {
    const qty1  = document.getElementById('qty1').value;
    const qty2  = document.getElementById('qty2').value;
    const total = parseInt(qty1) + parseInt(qty2);

    document.getElementById('orderTotal').innerHTML = '$ ' + total;
}

Удалите oninput="orderTotal()" в элементе span и активируйте указанную выше функцию, нажав кнопку например, <button onClick="orderTotal()">Calculate Total</button> или, может быть, когда значение любого из ваших двух входов изменяется. Также рассмотрите возможность использования const и let вместо var.

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/