Question

原谅我的无知我是Web开发的新手，我有一个简单的预算应用程序，可以从用户那里获取信息。我想在另一个HTML页面中显示此信息。但是，当我尝试选择特定的dom元素时，会抛出一个找不到它的错误。

我认为使用webpack可以解决我的问题。我将所有js文件捆绑在一起，并提供给我的所有html页面，但仍然无法访问我的元素。

//My controller got the data from the user and created an instance of the Budget object and gave the information to my displayincome function.

displayIncome(newBudget.id, newBudget.date, newBudget.description, newBudget.value);

//my displayIncome then tries to insert this data to the .item-container div.

export const displayIncome = (id, date, description, value) => {
  const markup = `
           <div class="item" href="#${id}">
            <div class= "item__date">
              ${date}
            </div>
            <div class="item__description">
              ${description}
            </div>
            <div class="item__value">
              ${value}
              <div class="item__delete">
                <div class="item__delete--btn"><i class="far fa-trash-alt"></i>
                </div>
              </div>
            </div>
        `;
  document.querySelector('.item-container').insertAdjacentHTML('afterend', markup);
};

预期将信息插入div。实际结果使我出现此错误：

bundle.51d4e9d….js：1未捕获的TypeError：无法读取null的属性“ insertAdjacentHTML” 在bundle.51d4e9d….js：1 在c（bundle.51d4e9d….js：1）在HTMLDivElement.document.querySelector.addEventListener.e（bundle.51d4e9d….js：1）

Answer 1

确保在元素.item-container之后包含bundle.js或在事件“ DOMContentLoaded”之后使用bundle.js。

示例：

document.addEventListener("DOMContentLoaded", function () {
   displayIncome(newBudget.id, newBudget.date, newBudget.description, newBudget.value);
});

在代码初始化之前使用displayIncome还有另一个问题。

如何从其他HTML文件中选择元素

1 个答案: