Модальное всплывающее окно не редактирует ⇐ Html

[Anonymous]

Итак, я пытаюсь настроить это всплывающее окно после печати счета, где оператор может заполнить предоставленную сумму, и он автоматически разбирает изменение. < /p>


Pagesa e Klientit
Klienti Pagoi:



Kusuri:




Konfirmo
Anulo




< /code>
console.log(" Generated Invoice:", filename);
window.showPaymentModal(invoice.total, monedha.split(' - ')[0]);

});

const modal = document.getElementById('payment-modal');
const paidInput = document.getElementById('paid-amount');
const changeOutput = document.getElementById('change-amount');
const confirmBtn = document.getElementById('confirm-payment');
const cancelBtn = document.getElementById('cancel-payment');

window.showPaymentModal = (total, currency = 'ALL') => {
modal.style.display = 'flex';
paidInput.value = '';
changeOutput.value = `0.00 ${currency}`;
setTimeout(() => paidInput.focus(), 50);

const updateChange = () => {
const paid = parseFloat(paidInput.value);
const change = !isNaN(paid) ? (paid - total).toFixed(2) : '0.00';
changeOutput.value = `${change} ${currency}`;
};

paidInput.removeEventListener('input', updateChange); // clean previous bindings
paidInput.addEventListener('input', updateChange);

confirmBtn.onclick = () => {
modal.style.display = 'none';
location.reload(); // Or continue to next logic
};

cancelBtn.onclick = () => {
modal.style.display = 'none';
};
};

< /code>

.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
z-index: 9999;
}

.modal-box {
background: #fff;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
width: 320px;
text-align: center;
}

.modal-box input {
width: 90%;
padding: 0.5rem;
font-size: 16px;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
text-align: center;
}

.modal-box input:focus {
border-color: #007aff;
outline: none;
}

.modal-actions {
display: flex;
gap: 1rem;
justify-content: center;
}

.modal-actions button {
flex: 1;
padding: 0.6rem;
font-weight: 500;
border: none;
border-radius: 8px;
background: #007aff;
color: white;
cursor: pointer;
}

.modal-actions button#cancel-payment {
background: #e0e0e0;
color: #333;
}

< /code>
The popup wont edit unless I tab out and tab back in. I tried simulating a focus out and focus in with no luck, I tried a myriad of things but no luck, anyone had a similar experience?

Подробнее здесь: https://stackoverflow.com/questions/795 ... -wont-edit