For-Schleife wird nicht ordnungsgemäß ausgeführt

Question

Ich versuche, eine Funktion zu erstellen, die Werte in innerHTML von Elementen ändert, die einen Klassennamen, aber andere Zahlenwerte haben.

wie in:

<div class="ingredient-assignment__quantity">5</div> 
<div class="ingredient-assignment__quantity">300</div> 
<div class="ingredient-assignment__quantity">250</div> 

Und ich mag eine Berechnung (für alle gleich) durch alle von ihnen zu laufen und dann die Innerhtml von jedem von jeweils das Ergebnis zu ändern.

wie in:

calcuation = 5 * innerHTML; 
<div class="ingredient-assignment__quantity">25</div> 
<div class="ingredient-assignment__quantity">1500</div> 
<div class="ingredient-assignment__quantity">1250</div> 

Meine JS-Funktion wie folgt aussieht:

function ingredientChange(){ 


var portionsBefore = document.getElementById('portions'); 
    var ingredients = document.getElementsByClassName('ingredient-assignment__quantity'); 

    function getPortions(event) { 
    const getID = event.target.id; 
    if (getID == "minus") { 
     var y = Number(portionsBefore.innerHTML) - 1; 
    } 
    else { 
     var y = Number(portionsBefore.innerHTML) + 1; 
    } 

    changeIngredients(y); 
    portionsBefore.innerHTML = y; 
    } 

    function changeIngredients(y) {  
    var arr = Object.keys(ingredients).map((k) => ingredients[k]) 
    for(var i = 0; i < arr.lenght; i++){ 
     var changeValues = Number(arr[i].innerHTML)/Number(portionsBefore.innerHTML); 
     var changedValues = Number(changeValues) * y; 
    } 
    } 

    function addEventListeners() { 
    document.getElementById('minus').addEventListener('click', getPortions, false); 
    document.getElementById('plus').addEventListener('click', getPortions, false); 
    } 
    addEventListeners(); 
} 

ingredientChange(); 

Und alles mit Ausnahme der for Schleife funktioniert.

Ich kann nicht finden, was falsch ist mit der for Schleife

Answer 1

Sie einen Tippfehler haben in Ihrer for Schleife

arr.lenght sollte arr.length sein.