I use the following script, which nearly works as it should:
<script>
const input1 = document.getElementById("voucher1");
const input2 = document.getElementById("voucher2");
const input3 = document.getElementById("voucher3");
const input4 = document.getElementById("voucher4");
const input5 = document.getElementById("voucher5");
const inputDiscount = document.getElementById("discount");
inputDiscount.addEventListener('change', updateValueDiscount);
input1.addEventListener('change', updateValueVoucher);
input2.addEventListener('change', updateValueVoucher);
input3.addEventListener('change', updateValueVoucher);
input4.addEventListener('change', updateValueVoucher);
input5.addEventListener('change', updateValueVoucher);
var InputOrgColor = discount.style.backgroundColor;
function updateValueDiscount(event) {
const apiUrl = 'https://...?discount-code='+event.target.value+'&voucher1='+input1.value+'&voucher2='+input2.value+'&voucher3='+input3.value+'&voucher4='+input4.value+'&voucher5='+input5.value;
if (event.target.value === '') {
event.target.style.backgroundColor = InputOrgColor;
document.getElementById("submit").style.visibility = `visible`;}
else
fetch(apiUrl)
.then(response => {
if (response.status === 200) {
event.target.style.backgroundColor = `#99ffcc`;
document.getElementById("submit").style.visibility = `visible`;
} else if (response.status === 201) {
**event.target.style.backgroundColor = `#ffcccb`;
document.getElementById("submit").style.visibility = `hidden`;
alert("Der Rabattcode wurde nicht gefunden. Bitte überprüfe Deine Eingabe.");**
} else if (response.status === 202) {
**event.target.style.backgroundColor = `#ffcccb`;
document.getElementById("submit").style.visibility = `hidden`;
alert("Der Rabattcode wurde zwar gefunden, kann aber für einen der ausgewählten Gutscheine nicht verwendet werden.");**
}
})
};
function updateValueVoucher(event) {
const apiUrl = 'https://...?discount-code='+inputDiscount.value+'&voucher1='+input1.value+'&voucher2='+input2.value+'&voucher3='+input3.value+'&voucher4='+input4.value+'&voucher5='+input5.value;
if (inputDiscount.value !== '') {
fetch(apiUrl)
.then(response => {
if (response.status === 200) {
inputDiscount.style.backgroundColor = `#99ffcc`;
document.getElementById("submit").style.visibility = `visible`;
} else if (response.status === 201) {
** inputDiscount.style.backgroundColor = `#ffcccb`;
document.getElementById("submit").style.visibility = `hidden`;
alert("Der Rabattcode wurde nicht gefunden. Bitte überprüfe Deine Eingabe.");**
} else if (response.status === 202) {
**inputDiscount.style.backgroundColor = `#ffcccb`;
document.getElementById("submit").style.visibility = `hidden`;
alert("Der Rabattcode wurde zwar gefunden, kann aber für einen der ausgewählten Gutscheine nicht verwendet werden.");**
}
})
}
};
If status codes 201 or 202 matches (bold lines of script), the input field doesn't become red until one clicks the alert message, but I would like to have the color switch to the red background BEFORE the alert appears.
What is my mistake?
Thank you very much in advanced.