我想让图像显示根据数学结果使用javascript

我为一个班级制作了这个收银机程序。现在，我希望更改显示为美元和硬币的图像，而不是字符。例如，如果更改应包括两张十美元和四分之三美元，我希望屏幕上显示两张十美元钞票的图像和三张四分之一美元的图像

我一直在寻找答案，但没有找到答案。我只是要求朝正确的方向推动一下。谢谢

$document.readyfunction{ $button.clickfunction{ var totalAmount=$input[name='total'].val； var amountTender=$input[name='tender'].val； var truncatedAmount=Math.floortotalAmount*100/100； var truncatedTender=Math.flooramountTender*100/100； var变更=截断端-截断端安装量； var truncatedChange=Math.roundchange*100/100； 如果truncatedTender=1{ $div.appendTwenties:++twenties+； } 如果mod1/10>=1{ $div.appendTens:++tens+； } 如果mod2/5>=1{ $div.appendFives:++fives+； 如果mod3/1>=1{ $div.appendOnes:++ones+； } 如果mod4/25>=1{ $div.appendQuarters:++quarters+； } 如果mod5/10>=1{ $div.appendDimes:++dimes+； } 如果mod6/5>=1{ $div.nickels:++nickels+； } 如果mod7/1>=1{ $div.appendPennies:++pennies+； } $div.appendTotal Change++truncatedChange.toFixed2； } }; }; 身体{ 字体系列：无衬线； } 标题{ 背景颜色：紫色； 颜色：白色； 文本对齐：居中； 字体大小：3.0em； 垫底：0.25em； 边界半径：0.5em； /*圆角*/ } div{ 背景色：C0； 边界半径：0.5em； /*圆角*/ 高度：90vh； } 跨度 输入 钮扣{ 字号：2em； 边界半径：0.5em； 显示：块； 宽度 100vw； 保证金：0自动； 填充：0.5em； } 梅西熟食店 账单金额： 投标金额： 计算 我想这样做：

使用对象存储货币集合。每个属性名称都是一种货币类型，属性值将是项数

var currency = {
  twenty: 2,
  ten: 1,
  five: 2,
  one: 3,
  quarter: 2,
  dime: 1,
  nickel: 1,
  penny: 3
}

使用上面的计算设置属性值，如下所示：

currency["penny"] = Math.floor(pennies); // (example)

查找或创建与属性同名的图像。对于便士，图像文件应命名为penny.jpg或penny.png

在HTML中创建一个id为currency list的ul元素

<ul id="currency-list"></ul>

---

轻推：在JavaScript中存储每种图像类型的HTML。每当您需要在页面上放置图像时，修改图像应该放置的位置的innerHTML以包含适当的HTML。

var c, currText, currImg, currDiv, list, listItem;
list = document.getElementById("currency-list")
for (c in currency) {
  listItem = document.createElement("li");
  currText = document.createTextNode(currency[c]);
  currDiv = document.createElement("div")
  currImg = document.createElement("img");
  currImg.setAttribute("src", c+".jpg");
  currDiv.appendChild(currText);
  currDiv.appendChild(currImg);
  listItem.appendChild(currDiv);
  list.appendChild(listItem);
}