Problemas com innerHTML dando erro

Front-end
,
#1

Alguém poderia me ajudar com o innerHTML do JavaScript, pois nos meus navegadores estão dando erro e apontando o erro para ele.
(Se tiver algum erro muito básico releva pf :frowning2:)

Código:

JQUERY 
        var total = document.getElementById("total");
        alert(total.innerHTML);

        function moneyTextToFloat(text){
            var cleanText = text.replace("R$ ", "").replace(",", ".");
            return parseFloat(cleanText);
        }

        function floatToMoneyText(value){
            var text = (value < 1 ? "0" : "") + Math.floor(value * 100);
            text = "R$ " + text;
            return text.substr(0, text.length - 2) + "," + text.substr(-2);
        }

        var total = document.getElementById("total");
        var formattedText = floatToMoneyText(moneyTextToFloat(total.innerHTML));

        alert(formattedText === total.innerHTML);

        function readtotal() {
            var total = document.getElementById("total");
            return moneyTextToFloat(total.innerHTML);
        }

        function writeTotal(value) {
            var total = document.getElementById("total");
            total.innerHTML = floatToMoneyText(value);
        }

        writeTotal(3.14159);

    </script>
    <table>
        <tbody>
        <tr>
            <td>
                <div>R$ 29,90</div>
            </td>
            <td>
                <input type="number">
            </td>
        </tr>
        </tbody>
        <tr>
            <td></td>
            <td>Total da compra</td>
            <td><div>R$ 29,90</div></td>
            <td></td>
        </tr>
    </table>
</body>

Erro: Uncaught TypeError: Cannot read property ‘innerHTML’ of null at teste.html:11