动态生成HTML

Question

我是一个绝对的初学者，已经进行了两周的自学，为一个月之内的训练营做准备。为了提高技能并“学会像开发人员一样思考”，我进行了一个尝试解决实际问题的项目。
我妻子经营一家公司，要求她为她的客户生成发票。我正在尝试使用HTML和JavaScript构建基于Web的应用程序，使她能够快速创建自定义发票，而不是每次都手动将其写出。
在当前版本中，提示要求她提供一个电话号码。此数字在HTML中生成相等数量的三列行。这样，她便可以使用所需的确切字段数自定义发票。
第1列包含产品名称。在同一行中，第2列包含单位计数，而第3列包含该产品的总成本，即基础价格乘以单位计数。我希望单击按钮即可进行此计算。但是，我被困住了。
为了执行数学运算，我需要能够从每一行和每一列中获取整数并将它们传递给函数。但是由于每个行和列都是自动生成的，因此它们没有唯一的属性，因此无法标识。我能够在每一列下执行数学运算，但不能在每一行上执行数学运算。
由于我是个新手，仅从夫妇的Codecademy入门课程和一些YouTube视频中学到了东西，所以我不知道如何评估我是否完全错误地进行了该项目，或者是否缺少一些技巧，或者如果还有什么还没学到。如果有一些专业知识的人可以向正确的方向推动我，我将非常感激！
我已经将所有代码附加到了这篇文章中。抱歉，如果这是一团糟。放轻松我，我是新手！
const invDate = Date（）;
var field =“  Item： ” +
“ 数量： ” +
“;” <标签为='价格'>价格（$）： <输入类型='数字'名称='价格'> 
 
“；
document.getElementById（'newInvoice'）。onclick = function（）{
让invoicedName =提示（“这张发票是给谁的？”，“输入名称”）；
let productFields = Number（提示（'此发票上有多少个产品名称？'，'请输入数字'））;
让字段=''
让dynHtml =''
if（invoicedName！= null && productFields！= null）{
for（让i = 1; i <= productFields; i ++）{
字段+ =字段};
} else {alert（'请输入有效的输入。'）;
};
dynHtml =“   
 
” +
“ 发票” +
“ 准备用于：” + invoicedName +“ ，开” +
“ 
” + invDate +“  
 
” +
栏位+“ 
 
” +
“

Accepted Answer

如您所说，您的主要问题是找到一种为行中的每个输入字段赋予自己唯一标识符的方法。这样，您可以计算每一行的价格并将其插入价格字段。
您首先必须从以下字段开始：
var field =“  Item： ” +
“ 数量： ” +
“;” <标签为='价格'>价格（$）： <输入类型='数字'名称='价格'> 
 
“；
document.getElementById（'newInvoice'）。onclick = function（）{
...
for（让i = 1; i <= productFields; i ++）{
字段+ =字段};
...
};
每个组都需要有自己的标识符。这样，您以后就可以参考每一行中的每个输入来计算总价格。您可以将class属性分配给多个元素，以在以后引用它们。此类可以是任何东西，只要它与任何其他行的类都不冲突即可。您可以将循环的i用作标识符，因为它随每个循环而变化。
for（让i = 1; i <= productFields; i ++）{
var field =“  Item： ” +
“ 数量： ” +
“” 价格（$）：  
 
“;
字段+ =字段
};
这会将类row- {i}添加到每行的每个字段中。更好的是，您可以将其重构为自己的功能
函数generateFields（i）{
返回“  Item： ” +
“ 数量： ” +
“” 价格（$）：  
 
“;
}
for（让i = 1; i <= productFields; i ++）{
字段+ = generateFields（i）;
};
您得到类似于以下html的内容
 Item： 
数量： 
价格（$）：  
 

 Item： 
数量： 
价格（$）：  
 

 Item： 
数量： 
价格（$）：  
 

现在，在您的calculate函数中，您可以参考这些行并计算其价格。在这里，您可以遍历“项目”输入字段。
document.getElementById（'calculate'）。onclick = function getQtyFields（）{
让itemInputs = document.getElementsByName（'item'）
for（让i = 0; i ）通过其名称选择其任何元素。
for（让i = 0; i

动态生成HTML

发票” + “
准备用于：” + invoicedName +“ ，开” + “
” + invDate +“

” + 栏位+“

” + “

热门问题

相关问题

动态生成HTML

热门问题

相关问题

最新问题