Javascript JS 内容生成问题

Introduction( kind of :) )个

首先，一杯咖啡要generate 5 coffee颗豆子.这个咖啡类有属性Strong，我想要grey out个咖啡豆，它是> strength(如下图所示).

My CoffeeMachine Class (simplified):个

class CoffeeMachine {
    constructor() {
        this.name = ""
        this.coffeeList = { list: [] }
        this.tokenList = { list: [] }
        this.shoppingCard = { list: [] }
    }
    addCoffe(coffee) {
        this.coffeeList.list.push(coffee)
    }
    addToken(token) {
        this.coffeeList.list.push(token)
    }
    addToCart(item) {
        this.shoppingCard.list.push(item)
    }
}

My Coffee Class (simplified):个

class Coffee {
    constructor() {
        this.name = ""
        this.price = 0
        this.time = 0.0
        this.imgsrc = ""
        this.strength = 0
        this.sugar = 0
        this.caffeine = 0
        this.values = []
        this.titelArray = ["caffeeine", "sugar", "time", "strength"]
        this.colors = ["#e34444", "#7944e3", "#44e35c", "#e3d044"]
    }
    setValues(name, price, time, strength, imgsrc, sugar, caffeine) {
        this.name = name
        this.price = price
        this.time = time
        this.strength = strength
        this.imgsrc = imgsrc
        this.sugar = sugar
        this.caffeine = caffeine
    }
    setCoffeeValues() {
        this.values = [this.caffeine + "mg", this.sugar + "g", this.time + "s", this.strength + "/5"]
    }

}

咖啡将被推入咖啡机的购物车 list 中，如下所示:

coffeeMachine.shoppingCard.list.push(coffeeMachine.coffeeList.list[index])

Init the coffees个

coffeeLatte.setValues("Latte Macchiato", 1.60, 30.0, 3, "../pics/coffeeLatte.png", 18, 75)
        coffeeBlack.setValues("Black Coffee", 1.20, 20.0, 5, "../pics/coffeeBlack.png", 4, 95)
        coffeCappunchino.setValues("Cappuccino", 1.60, 35, 2, "../pics/coffeeCappuchino.png", 12, 64)

The update shopping cart method in the coffee machine class (the prolem):个

下面是我为列表中的每一种咖啡生成咖啡豆的方式:

  for (let i = 0; i < this.shoppingCard.list.length; i++) {
            for (let j = 0; j < 5; j++) {
                document.getElementsByClassName('beans')[i].innerHTML += `<img class="bean" src="../pics/bean.png"></img>`
            }
        }

在下面的代码中，我将One&lt；=Cafee.Stronga的不透明度设置为100%，将其他代码的不透明度设置为30%:

for (let i = 0; i < this.shoppingCard.list.length; i++) {
    for (let j = 0; j < this.shoppingCard.list[i].strength; j++) {
        document.getElementsByClassName('bean')[i].style.opacity = "1"
        if (j <= this.shoppingCard.list[i].strength){
            for (let k = this.shoppingCard.list[i].strength; k < 5; k++) {
                document.getElementsByClassName('bean')[k].style.opacity = "0.3"

            }
        }
    }
}  

After adding a few coffes to the shopping cart this happens: