Menge umrechnen

[Mestragon]

Servus Contao Community,

ich habe eine kleine Rezeptverwaltung und möchte jetzt die Menge der Zutaten an die Anzahl der Personen anpassen. Das heißt jemand schaut sich ein Rezept an, verändert die Anzahl der Personen und die Zutatenmenge wird automatisch angepasst.

Beispiel:
zutatenrechner.jpg

Ich habe schon mal nach ein paar Code-Schnipseln im Internet gesucht und folgendes gefunden:

<script>
function recipeCalculator(recipe, inputField, updater) {
    inputField.addEventListener("change", function () {
        var factor = this.value / recipe.baseAmount;
        var newRecipe = {};
        newRecipe.baseAmount = this.value;
        newRecipe.ingredients = recipe.ingredients.map(function (ingredient) {
            return {
                name: ingredient.name,
                amount: ingredient.amount * factor
            };
        });
        updater(newRecipe);
    });
};

var recipe = {
    baseAmount: 1,
    ingredients: [{
        name: "Sugar (in grams)",
        amount: 300
    }, {
        name: "Salt (in grams)",
        amount: 2
    }]
};

function updateResults(newRecipe) {
    document.getElementById("results").innerHTML = newRecipe.ingredients.reduce(function (prevValue, ingredient) {
        return prevValue + ingredient.name + "<br>" + ingredient.amount + "<br><br>";
    }, "");
};

recipeCalculator(recipe, document.getElementById("personen"), updateResults);
// Show initial recipe
updateResults(recipe);
</script>

Irgendwie soll ich dann per

<div id="results"></div>

die Ausgabe bekommen, aber es klappt nicht. Mir scheint das auch nicht die perfekte Lösung zu sein und nachdem ich nicht so gut im Programmieren bin würde ich mich über Tipps und Vorschläge von euch freuen.

Beste Grüße und ein schönes Pfingstwochenende,
Mestragon

[fiedsch]

Irgendwie soll ich dann per

<div id="results"></div>

die Ausgabe bekommen, aber es klappt nicht.

Was "klappt" denn genau nicht?

• <div id="results"> ist in Source-Code Deiner Seite vorhanden?
• Falls ja: wird aber nicht mit Ausgabe gefüllt?
• Falls ja: gibt es Fehlermeldungen in der Console (Browser -> Entwicklertools)

Ich habe in eine leere HTML-Seite Deinen Code per copy/paste übernpmmen und er funktioniert.

[Mestragon]

Ja, die RESULTS DIV BOX ist im Source Code drin. Er zeigt mir allerdings die Zutaten nicht an. Ich weiß nicht, vermutlich hab ich beim Einfügen in den Contao Artikel was falsch gemacht?

Contao Artikel:
zutatenrechnercode.jpg


Die Entwicklertools zeigen folgenden Error an:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at recipeCalculator (rezeptvorschläge.html:106)
    at rezeptvorschläge.html:137

[fiedsch]

Die Entwicklertools zeigen folgenden Error an:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at recipeCalculator (rezeptvorschläge.html:106)
    at rezeptvorschläge.html:137

Das sieht für mich danach aus, daß das <input id="personen"></div> nicht im ausgegebenen HTML enthalten ist. Denn das fehlgeschlagene addEventListener bezieht sich genau auf dieses <input>.

Link zur Seite?

[Mestragon]

Ist eigentlich auch eingefügt, sieht man auch auf dem Bild.

Zur Seite: Heldenköche - Rezeptübersicht

Auf einer leeren HTML Seite funktioniert der Code bei mir auch. Nur wenn ich es über Artikel bei Contao einfüge geht es nicht, vermute das ich da etwas falsch gemacht habe.

[fiedsch]

Ist eigentlich auch eingefügt, sieht man auch auf dem Bild.

Auf dem Bild sieht man nur, daß Du es im Backend als Content Element angelegt hast. Ob das dann auch ausgegeben wird -- könnte z.B. scheitern, wenn die verwendeten HTML-Tags in den Einstellungen nicht unter "erlaubte HTML-Tags" eingetragen sind -- ist eine andere Sache. Hierzu solltest Du Dir immer den erzeugten HTML-Code anschauen.

Zur Seite: Heldenköche - Rezeptübersicht

In der Contao Seite steht der script Code über dem HTML, das das input Feld erzeugt. Wenn das Skript ausgeführt wird, sobald es im Quelltext erscheint, ist das input "noch gar nicht da" und der Code erzeugt einen Fehler. Du solltest den Teil des Codes, der voraussetzt, daß bestimmte Elemente vorhanden sind so verwenden (jQuery hast Du auf der Seite ja bereits geladen):

<script>

// Deine Funktionsdefinitionen wie gehabt

$(document).ready(function() {
  recipeCalculator(recipe, document.getElementById("personen"), updateResults);
  // Show initial recipe
  updateResults(recipe);
});
</script>

[Mestragon]

Danke, jetzt funktioniert es :-)