Aktualizacja portfela JavaScript

pytanie zadane 11 maja 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)
edycja 11 maja 2021 przez ShockWave

Cześć, mam pytanie jak mogę zaktualizować ilość pieniędzy w portfelu po edycji inputa.

let income = {
            przychod: testFormIncome.value,
            kwotaIncome: testFormValue.value,
        };

//tutaj dodaje wartość do portfela

incomes += parseFloat(income.kwotaIncome);
        incomesSum.innerHTML = "Suma przychodów: " + incomes + " zł";
        wallet = incomes - expenses;
        howSpendMoney.innerHTML = "Można wydać: " + wallet + " zł";

//tutaj próbuje tą wartość zedytować

btnSave.addEventListener("click", (e) =>{
                li.innerText = `${inputName.value} - ${inputValue.value} zł`;
                li.appendChild(btnEdit);
                li.appendChild(btnRemoveIncome);
                
                
                incomes += parseFloat(inputValue.value);
                incomesSum.innerHTML = "Suma przychodów: " + incomes + " zł";
                wallet = incomes - expenses;
                howSpendMoney.innerHTML = "Można wydać: " + wallet + " zł";
            });

3 odpowiedzi

odpowiedź 12 maja 2021 przez cava96 Gaduła (3,940 p.)

odpowiedź 12 maja 2021 przez JAKUBW Nałogowiec (33,470 p.)

Użyj zdarzenia oninput (jakakolwiek zamiana w inpucie) lub onchange (zatwierdzenie dla danego inputu)

komentarz 12 maja 2021 przez ShockWave Bywalec (2,350 p.)

@JAKUBW jeżeli ktoś nie poda rozwiązania matematycznego to spóbuję to z nasłuchiwaniem eventu.

odpowiedź 12 maja 2021 przez VBService Ekspert (253,340 p.)

Możesz też wykorzystać zdarzenie HTMLElement.blur()

Przykład, aktualizowanie po "utraceniu" kursora ("wyjściu") z input-a lub naciśnięciu Enter-a.

<label for="income">Twój przychód:</label>
<input type="number" id="income" name="income" min="0">
<div class="wallet">Twój porfel: <span>0</span> zł</div>

label {
  display: block;
  width: 8em;
}
input[type=number] {
  width: 8em;
  margin: 0.25em 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-appearance: none;
  margin: 0;
}
.wallet {
  margin: 1em 0;
}

window.onload = () => {
  const input_income = document.querySelector('#income');
  const wallet_value = document.querySelector('.wallet span');
  
  input_income.focus();
  
  input_income.addEventListener('focus', () => {
    input_income.value = '';
  })
  
  input_income.addEventListener('blur', updateWallet)
  
  input_income.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.keyCode === 13) {
      updateWallet();
      input_income.value = '';      
    }
  })
  
  function updateWallet() {
    const wallet_current_value = wallet_value.innerText * 1;
    const income_value = input_income.value.trim() * 1;
    if (income_value != '') {
      wallet_value.textContent = parseFloat(wallet_current_value + income_value).toFixed(2);
    }    
  }
}

komentarz 12 maja 2021 przez ShockWave Bywalec (2,350 p.)

@VBService, problem polega raczej na tym że nie wiem jak matematycznie rozwiązać to, żeby portfel się aktualizował o tą wartość po edycji.

komentarz 12 maja 2021 przez VBService Ekspert (253,340 p.)

Nie bardzo rozumiem w jakim sensie "matematycznym", masz problem ze zwracanymi wartościami z pól (input)?

komentarz 12 maja 2021 przez ShockWave Bywalec (2,350 p.)

https://jsfiddle.net/4j6eod1q/11/

Spróbuj zedytować jakąś wartość w przychodach tak, żeby zmieniła się wartość i zapisz ją. Portfel się źle aktualizuje.

komentarz 12 maja 2021 przez ShockWave Bywalec (2,350 p.)

Już rozwiązałem problem, ciężko mi wytłumaczyć rozwiązanie. Więc gdyby ktoś chciał znać odp to możemy się złapać na jakimś zoomie. Ogólnie to trzeba odjąć od wartości zapisanej w dataset wartość którą mamy po edycji.