problem when using javascript to display banner, the banner does not display when using javascript?

Question

I am newbie with javascript and here is my problem.

Here is my code

https://codepen.io/nguyencuc2035/pen/XWVXxxK

As you can see in my code, I wrote a javascript to display a banner named toast at a right conner and here is the code

<script>
        function toast({
            title = '',
            message = '',
            type = 'info',
            duration = 3000
        }) {
            const main = documet.getElementById('toast');
            if (main) {
                const toast = documet.createElement('div');
                toast.classList.add('toast');
                toast.innerHTML = `
                <div class="toast__icon">
                <i class="fa-solid fa-circle-check"></i>
                </div>
                <div class="toast__body">
                <h3 class="toast__title">Success</h3>
                <p class="toast__msg">Import an external stylesheet:</p>
                </div>
                <div class="toast__close">
                <i class="fa-solid fa-xmark"></i>
                </div>
                `;
                main.appendChild(toast);
            }
        }
        toast({
            title: 'Success',
            message: 'Import an external stylesheet:',
            type: 'success',
            duration: 3000
        })
    </script>

Of course in the styles.css I wrote .toast .toast__icon , .toast__body , .toast__close,

But my problem is, when I ran my code, it only display the toast__body and toast__close, not display the toast.

Could you please give me some advice for this problem ? Thank you very much for your time.

Answer 1

I Fidgeted with your code on Codepen, and it seems you've used documet and not document. You're missing an N.

Remember you have to be really careful with your spellings in JavaScript. If it still doesn't work feel free to reply back. Hope this helped.

And if it helps you can use jQuery to just append the banner. It really simplifies the code as well.