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

时间:2019-04-27 15:40:22

标签: javascript html

原谅我的无知我是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)

1 个答案:

答案 0 :(得分:-1)

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

示例:

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

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