Javascript 未捕获引用错误：未定义变量

所以我正在制作一个小费计算器，除了一个有问题的孩子外，一切都很好。。。当我检查它时，它给我的值似乎是“未定义的”

其目的是根据其他字段的输入更改“新账单”中显示的结果。 它对应的行是-document.getElementById（'new-bill'）.innerHMTL='.'英镑'+newbillach.toFixed（2）（倒数第二行）

我已经运行了单独的测试来检查我所有的标签是否都正常，它们似乎都正常。昨天晚上大概花了四个小时尝试不同的东西，但没有运气。救命啊

document.getElementById（'container'）。onchange=function（）{
const bill=Number（document.getElementById（'total-bill'）.value）；
const tipPercent=document.getElementById（'tip-input'）。值；
const split=document.getElementById（'split-input'）。值；
const tipValue=票据*（tipPercent/100）；
const newbileach=（票据+提价）/分割；
const tipEach=tipValue/split；
document.getElementById（'tip-output'）。innerHTML=tipPercent+'%'；
document.getElementById（'split-output'）。innerHTML=split；
document.getElementById（'new-bill'）.innerHMTL='英镑'+newbillach.toFixed（2）；
document.getElementById（'tip-each'）.innerHTML='英镑'+tipEach.toFixed（2）；
}

正文{
宽度：100%；
背景色：#F1F3F6；
保证金：0；
-webkit框大小：边框框；
框大小：边框框；
}
主体{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
宽度：100%；
高度：100vh；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
主体人力资源{
边框：2px实心#F1F3F6；
宽度：80%；
-网络工具包盒阴影：4px4px8px2pxrgba（55,84170,0.123），-3px-3px8px2pxrgba（255,255,0.979）；
盒影：4px4px8px2pxrgba（55,84170,0.123），-3px-3px8px2pxrgba（255,255,0.979）；
}
#容器{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
保证金：0；
填充：0；
背景色：#F1F3F6；
宽度：40em；
高度：40公分；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
边界半径：33%；
-webkit边界半径：33%；
-moz边界半径：33%；
-ms边界半径：33%；
-o-边界半径：33%；
-webkit盒阴影：29px 29px 28px 13px rgba（55,84,170,0.1），-30px-30px 28px 13px白色；
盒影：29px28px13pxRGBA（55,84170,0.1），-30px28px13px白色；
}
#集装箱台{
字体系列：“Signika”，无衬线；
字体大小：20px；
颜色：#486b；
利润率：30px0；
宽度：80%；
}
#容器表tr：悬停{
背景色：#e6e9ee；
}
#集装箱表tr td span{
左边距：10px；
}
#容器表。左栏跨度{
颜色：#A6C0；
字号：18px；
}
#容器表。右列{
字体系列：“Inknut Antiqua”，衬线；
字体大小：16px；
}
#容器表输入{
宽度：72%；
背景色：#F1F3F6；
边界：无；
字体系列：“Signika”，无衬线；
字号：18px；
颜色：#A6C0；
填充物：5px；
}
标题{
字体大小：50px；
字体系列：“Inknut Antiqua”，衬线；
文本对齐：居中；
颜色：#141414；
z指数：2；
边缘底部：30px；
}

提示计算器应用程序
小费计算器
账单总额：
提示：
0%
拆分（人数）
1.

新账单：（每人）
£0.00
小费金额：（每人）
£0.00

您的代码中有一个输入错误：您使用

innerHMTL

：

document.getElementById('new-bill').innerHMTL = '£'+ newBillEach.toFixed(2);
/*__________________________________^^^^^^^^^_____________________________*/

它应该是

.innerHTML

：

document.getElementById('new-bill').innerHTML = '£' + newBillEach.toFixed(2);

请参见此处的工作示例：

document.getElementById（'container'）。onchange=function（）{
const bill=Number（document.getElementById（'total-bill'）.value）；
const tipPercent=document.getElementById（'tip-input'）。值；
const split=document.getElementById（'split-input'）。值；
const tipValue=票据*（tipPercent/100）；
const newbileach=（票据+提价）/分割；
const tipEach=tipValue/split；
document.getElementById（'tip-output'）。innerHTML=tipPercent+'%'；
document.getElementById（'split-output'）。innerHTML=split；
document.getElementById（'new-bill'）.innerHTML='英镑'+newbillach.toFixed（2）；
document.getElementById（'tip-each'）.innerHTML='英镑'+tipEach.toFixed（2）；
}

正文{
宽度：100%；
背景色：#F1F3F6；
保证金：0；
-webkit框大小：边框框；
框大小：边框框；
}
主体{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
宽度：100%；
高度：100vh；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
身体