Rolf B: Variable in Javascript übergeben bei dynamischen Inputfeldern

Beitrag lesen

Hallo Lynnv,

       let ausgabep = gruppe.querySelector(".preise");

       if (preisesu > 60) {
            document.getElementsByTagName('output')[iy].style.backgroundColor = 'red';
            document.getElementsByTagName('output')[iy].style.color = 'white';
            ausgabep.textContent = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(preisesu) + " Achtung - Der Maximalbetrag von 60,- Euro wurde überschritten !";
        }
        else{
           document.getElementsByTagName('output')[iy].style.backgroundColor = 'white';
           document.getElementsByTagName('output')[iy].style.color = 'green';
           ausgabep.textContent = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(preisesu);
        }      

Ich mutmaße, dass Du mehr output-Elemente hast als Du glaubst und deswegen iy nicht der richtige Index ist. Aber das ist nur geraten, dazu müsste man dein HTML kennen.

Man sollte einen robusteren Ansatz verfolgen. Steht in ausgabep nicht das output-Element drin, das Du stylen möchtest? Wenn ja, dann ändere einfach ausgabep.style ab, statt erneut mit getElementsByTagName über das ganze Dokument zu laufen.

(Exkurs: Verbesserungspotenzial)

Eigentlich sollte man auch die styles nicht direkt zuweisen. Dass Klassen und ein Stylesheet (eine .css Datei oder eine <style> Abteilung im <head> Bereich deines Dokuments) die bessere Vorgehensweise sind, hatten wir Dir schon gesagt. Wenn Du das noch nicht kennst, findest Du dazu eine Menge in unserem Wiki. Ein max-height auf einem input-Element ergibt übrigens meiner Meinung nach keinen Sinn, das ist ein inline-Element, das macht sich seine Höhe selbst.

Mit Klassen kann man es so machen, dass Du die classList von ausgabep veränderst (vorausgesetzt, ausgabep ist das output-Element, das zu stylen ist). Das geht so:

let preisText = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(preisesu);

if (preisesu > 60) {
   ausgabep.classList.add("zu-hoch");
   ausgabep.classList.remove("ok");
   ausgabep.textContent = preisText + " Achtung - ...";
}
else {
   ausgabep.classList.remove("zu-hoch");
   ausgabep.classList.add("ok");
   ausgabep.textContent = preisText;
}

Aspekt 1: Den Betrag nur einmal formatieren Aspekt 2: Styling über Klassen. Im CSS schreibst Du

.preise.ok {
   color: green;
   background-color: white;
}
.preise.zu-hoch {
   color: white;
   background-color: red;
}

Wenn Du noch gar kein Stylesheet drin hast und Dir das zu kompliziert wird, dann vergiss das wieder. Aber die Idee, den Text nur einmal zu formatieren, könntest Du aufgreifen.

(Exkurs Ende)

Wenn das Element in ausgabep und das output-Element, das Du stylen willst, verschiedene Elemente sind - hm. Dann schauen wir noch mal. Sieht das HTML noch so aus, wie Du am 12.11. um 16:00 gepostet hast? Oder ist das output-Element mittlerweile ins fieldset hinein gewandert? Vielleicht zeigst Du das aktuelle HTML nochmal. Den Eingabebereich von 1xHandschuhe bis 1xSchürze (meinst Du da Einweg-Artikel? Sollte man das dann nicht auch so schreiben? Aber ok, es ist euer Jargon...). Aber ich würde gerne das Fieldset und den output-Bereich dazu sehen.

Rolf

--
sumpsi - posui - obstruxi