HTML элементы не определены

Question

Когда я хочу сохранить любой элемент в переменную, он оказывается неопределенным. Который в этом случае является basketDiv. Когда я пытаюсь добавить к нему, он говорит, что это не определено. html и js находятся в отдельных файлах. Но я не думаю, что это проблема, потому что все остальное работает.

Спасибо за помощь

    function createItemRow(name, price, amount)
    {
    var itemRow = document.createElement('div');
    var basketDiv = this.document.getElementsByClassName('basket')[0];
    itemRow.classList.add('item');
    var itemRowHtml = `
    <h2 id="name">${name}</h2>
    <h2 id="amount">Amount: ${amount}</h2>
    <h2 class="close">X</h2>                
    <h2 id="price">${price} Kč</h2>`;
    itemRow.innerHTML = itemRowHtml;
    console.log(basketDiv);
    basketDiv.append(itemRow);
    }

    <div class='basket'>
            <div class="item">
                <h2 id="name">Xiaomi Mi A2</h2>
                <h2 id="amount">Amount: 1</h2>
                <h2 class="close">X</h2>                
                <h2 id="price">5000 Kč</h2>
            </div>   
            <div class="item">
                <h2 id="name">Xiaomi Mi A2</h2>
                <h2 id="amount">Amount: 1</h2>
                <h2 class="close">X</h2>                
                <h2 id="price">5000 Kč</h2>
            </div>  
            <div class="item">
                <h2 id="name">Xiaomi Mi A2</h2>
                <h2 id="amount">Amount: 1</h2>
                <h2 class="close">X</h2>                
                <h2 id="price">5000 Kč</h2>
            </div>  
        </div>

Answer 1

Ваша функция действительно работает, может быть, вы пытаетесь получить элемент до отображения страницы

function createItemRow(name, amount, price) {
   	var itemRow = document.createElement('div');
    var basketDiv = this.document.getElementsByClassName('basket')[0];
    itemRow.classList.add('item');
    var itemRowHtml = `
    <h2 class="name"> ${name}</h2>
    <h2 class="amount">Amount: ${amount}</h2>
    <h2 class="close">X</h2>                
    <h2 class="price">${price} Kč</h2>`;
    itemRow.innerHTML = itemRowHtml;
    console.log(basketDiv);
    basketDiv.append(itemRow);
}

.item {
  border: 1px solid red;
  margin-top: 5px;
}

<button onClick="createItemRow('toto', 50, 10)">createItemRow</button> 
 <div class='basket'>
     <div class="item">
       <h2 id="name">Xiaomi Mi A2</h2>
       <h2 id="amount">Amount: 1</h2>
       <h2 class="close">X</h2>                
       <h2 id="price">5000 Kč</h2>
     </div>   
</div>