Javascript script switch color "onchange" only after clicking alert and not before

15 views Asked by At

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.

0

There are 0 answers