我有一个EJS模板,在这里我以两种不同的方式使用外部函数。加载文档后,我想遍历现有数据,并在按钮上单击我也要触发该函数。单击时效果很好,但在页面加载时不起作用。
外部JS函数为客户插入表格来声明其债务。用户已经声明了他们的债务。我正在编辑页面上工作,他们可以在其中更改以前的信息或声明新的债务。
页面加载后,我要:
A)遍历其现有债务,将信息提供给addDebt函数,并即时创建一个预先填充的表格。
B)我还希望他们能够使用具有相同功能的下拉按钮添加新债务以插入空白表格。
B可以很好地工作,但是该功能无法在A中识别。我确定这是一个时序问题,当NODE尝试渲染A时未加载DOM内容。我只是想不通要解决这个问题。当我尝试将window.onload添加到function.js时,它完全停止工作!
很抱歉,这个问题是冗长还是不清楚,因为我的用户名表明我是新来的。
function.js
function addDebt(x, y) {
DOM manipulation to insert different form elements based on value of x (ie “credit card”,
“home Loan” etc)
if (y == '1')
generate pre populated fields for existing debts
Ejs
<div class="container main">
<h4>Edit debts:</h4>
//PART A - loop through existing debts of the user and feed them into the
function to generate pre populated forms for editing the information
<% liabilities.forEach(function(liability){ %>
addDebt(<%= liability.type %>, ‘1’);
<% }); %>
// PART B - allow user to add new debts by selecting them from dropdown
<div class="dropdown col-12 col-sm-3 mb-2">
<button data-toggle="dropdown">
Add a new debt
</button>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="addDebt('Home Mortgage', '0')"
href="#">Mortgage on your home</a>
<a class="dropdown-item" onclick="addDebt('Credit Card, '0',
'0')"href="#">Credit cards</a>
<a class="dropdown-item" onclick="addDebt('Car Loan', '0')"
href="#">Car Loans</a>
</div>
</div>