Hintergrundfarbe ändert sich erst nach Klick auf den alert(), aber nicht vorher - warum?

[Icarus]

<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.");
}
})
}
};<script>

Das Skript funktioniert fast vollständig.

Bei den fett markierten Skript-Teilen soll ein Farbwechsel der Hintergrundfarbe von grün zu rot erfolgen und ein Alert erscheinen. Allerdings wird der Farbwechsel erst aufgeführt, wenn der Benutzer auf den OK-Button des Alert geklickt hat, aber eben nicht vorher, obwohl es im Skript auch vor dem Alert steht.
Ich möchte erst die rote Hintergrundfarbe haben und dann den Alert.

Wo liegt mein Fehler?


Beste Grüße udn Danke vorab

 

[Andreas-B]

TLDR: versuche das Alert in einen Timeout von 0 zu wrappen:

setTimeout(() => {
    alert("Der Rabattcode wurde nicht gefunden. Bitte überprüfe Deine Eingabe.");  
}, 0);

Erklärung:

inputDiscount.style.backgroundColor = `#ffcccb`;
document.getElementById("submit").style.visibility = `hidden`;
alert("Der Rabattcode wurde nicht gefunden. Bitte überprüfe Deine Eingabe.");

Das ist problematisch, da es alles synchron ausgeführt wird, ohne dass das Layout aktualisiert wird.

Dein Code läuft also so ab:
1. Hintergrund wird eingefärbt.
2. Das Element #submit wird versteckt.
3. Das Alert wird ausgeführt.
In keinem dieser Schritte wurde das Layout deiner Seite aktualisiert.
Das alert (so wie alle nativen Dialoge) verhindert, dass die Seite aktualisiert wird, bis der Dialog wieder geschlossen wird.
Sobald du das Alert schließt, wird deiner Seite aktualisiert und du siehst die Auswirkungen deines Codes.

Eine Lösung ist also, das ausführen des Alerts zu verzögern, bis die Seite aktualisiert wurde.
setTimeout von 0 macht genau das und "wartet" eine Phase, so das die Seite aktualisiert werden kann.

Grüße
Andreas

 

[Icarus]

Hallo Andreas,

vielen Dank für Deine Hilfe. Das Problem ist nun verstanden. Ich habe für die 4 betroffenen Alerts das Skript so wie vorgeschlagen angepasst, es hat aber leider nicht den gewünschten Effekt gebracht. Der Farbwechsel erfolgt immer noch erst nach dem Klick auf "Ok" im Alert. Hier mal die betroffene Seite:

https://flyingbones.de/gutschein-bestellen/

Es geht um das Feld "Rabattcode" und wenn man das einen Code eingibt, der nicht existiert. Vielleicht hilft es ja.

 

[Andreas-B]

Hallo @Icarus,

Auf deiner Seite sehe ich überhaupt keine Alerts.
Das geschilderte Problem, dass die Seite geblockt wird, bis der user eine Aktion ausführt, gibt es nur bei Nativen Dialogen (bei dir: Alert).
Kannst du bezogen auf deine Seite mal schildern was passieren soll ("Soll Stand") und was stattdessen passiert ("Ist Stand")?

Ich habe das Gefühl Das Beispiel hat dein eigentliches Problem nicht ausreichend abgebildet.