動態生成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

热门问题

相关问题

最新问题