Tip calculator- changing the innerHTML

Hello hello,

So im making a tip calculator (following a video), and everything is finE apart from one innerHTML wont change. I keep looking but I cant find the problem. Help please.

This is the link to the codepen: https://codepen.io/ceramants/pen/MWYrXZj

The problem child would be the ‘new bill (per person)’ isn’t updating. Its corresponding line is:

document.getElementById('new-bill').innerHMTL = newBillEach.toFixed(2);


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./styles/style.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Signika:400,600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua:500&display=swap" rel="stylesheet">
    <title>Tip Calculator App</title>
        <header>Tip Calculator</header>
        <section id='container'>
            <table class='row-one'>
                  <td class='left-col'>Total Bill:</td>
                  <td class='right-col'><input type="text" placeholder="Enter your total bill..." id="total-bill"></td>
                  <td class='left-col'>Tip:</td>
                  <td class='right-col'>
                      <input type="range" value="0" id="tip-input" class="range">
                      <span id="tip-output">0%</span>
                  <td class='left-col'>Split <span>(number of people)</span></td>
                  <td class='right-col'>
                      <input type="range" value="1" min="1" max="30" id="split-input" class="range">
                      <span id="split-output">1</span>
            <table class='row-two'>
                  <td class='left-col'>New bill: <span>(per person)</span></td>
                  <td class='right-col'><span id="new-bill">£0</span></td>
                  <td class='left-col'>Tip Amount: <span>(per person)</span></td>
                  <td class='right-col'><span id="tip-each">£0</span></td>

    <script src="/script.js"></script>



document.getElementById('container').onchange = function(){

    const bill = Number(document.getElementById('total-bill').value);

    const tipPercent = document.getElementById('tip-input').value;

    const split = document.getElementById('split-input').value;

    const tipValue = bill * (tipPercent/100);

    const newBillEach = (bill + tipValue) / split;

    const tipEach = tipValue / split;

    document.getElementById('tip-output').innerHTML = `${tipPercent}%`;

    document.getElementById('split-output').innerHTML = `${split}`;

    document.getElementById('new-bill').innerHMTL = newBillEach.toFixed(2);

    document.getElementById('tip-each').innerHTML = '£' + tipEach.toFixed(2);


If you run document.getElementById('new-bill') in your browser’s console then you can see whether you get a match. If you don’t, you might want to check that the id match, or if you do, then the console will display the result and you can inspect its attributes and consider what you can do with it.