HTMLを動的に生成する

Question

私はまったくの初心者で、1か月後に開催されるブートキャンプに備えて2週間自習しています。スキルを磨き、「開発者のように考えることを学ぶ」ために、現実の問題を解決しようとするプロジェクトに取り組みました。
私の妻は、クライアントの請求書を作成するように要求するビジネスを運営しています。 HTMLとJavaScriptを使用して、毎回手動で書き出すのではなく、カスタム請求書をすばやく作成できるWebベースのアプリケーションを構築しようとしています。
現在のバージョンでは、プロンプトが彼女に番号を要求します。この数は、HTMLで同数の3列の行を生成します。これにより、彼女は必要なフィールドの正確な数で請求書をカスタマイズできます。
列1には製品名が含まれています。同じ行の列2にはユニット数が含まれ、列3にはその製品の総コストが含まれます。これは、基本価格にユニット数を掛けたものです。この計算はボタンをクリックしたときに発生するようにします。しかし、私は立ち往生しています。
計算を実行するには、各行と列から整数を取得して、それらを関数に渡すことができる必要があります。ただし、各行と列は自動的に生成されたため、一意の属性がなく、それによって識別できません。各列で計算を実行することはできますが、各行で実行することはできません。
私はとても新しいので、Codecademyの入門コースといくつかのYouTubeビデオからしか学んだことがないので、プロジェクトに完全に間違って取り組んでいるかどうか、または何かトリックが欠けているかどうかを評価する方法がわかりません。まだ学んでいないことがあれば。専門知識のある人が私を正しい方向に導くことができれば、本当にありがたいです！
この投稿にすべてのコードを添付しました。それがひどい混乱であるならば、謝罪します。気楽に、私は初心者です！
const invDate = Date（）;
var field = " Item： " +
"数量： " +
"価格（$）：  
 
";
document.getElementById（ 'newInvoice'）。onclick = function（）{
let invoicedName = prompt（ 'この請求書は誰に送られますか？'、 '名前を入力してください'）;
let productFields = Number（prompt（ 'この請求書にはいくつの製品名がありますか？'、 '番号を入力してください'））;
フィールド= ''
dynHtml = ''
if（invoicedName！= null && productFields！= null）{
for（let i = 1; i <= productFields; i ++）{
フィールド+ =フィールド};
} else {alert（ '有効な入力を入力してください。'）;
};
dynHtml = "  
 
" +
" INVOICE " +
"準備：" + invoicedName + "、on" +
"
" + invDate + " 
 
" +
フィールド+ "
 
" +
"

Accepted Answer

あなたが言ったように、あなたの主な問題は、独自の行内のすべての入力フィールドに独自の一意の識別子を与える方法を見つけることです。このようにして、各行の価格を計算し、それを価格フィールドに挿入できます。
まず、フィールドから始める必要があります。
var field = " Item： " +
"数量： " +
"価格（$）：  
 
";
document.getElementById（ 'newInvoice'）。onclick = function（）{
..。
for（let i = 1; i <= productFields; i ++）{
フィールド+ =フィールド};
..。
};
すべてのグループには独自の識別子が必要です。そうすれば、後で各行のすべての入力を参照して、小計価格を計算できます。 class属性は、後で参照するために複数の要素に割り当てることができるものです。このクラスは、他の行のクラスと競合しない限り、何でもかまいません。ループごとに変化するため、ループのiを識別子として使用できます。
for（let i = 1; i <= productFields; i ++）{
var field = " Item： " +
"数量： " +
"価格（$）：  
 
";
フィールド+ =フィールド
};
これにより、クラス行-{i}がすべての行のすべてのフィールドに追加されます。さらに良いことに、これを独自の関数にリファクタリングすることができます
関数generateFields（i）{
return " Item： " +
"数量： " +
"価格（$）：  
 
";
}
for（let i = 1; i <= productFields; i ++）{
フィールド+ = generateFields（i）;
};
次のhtmlのようなものが得られます
 Item： 
数量： 
価格（$）：  
 

 Item： 
数量： 
価格（$）：  
 

 Item： 
数量： 
価格（$）：  
 

これで、計算関数で、これらの行を参照して価格を計算できます。ここで、「item」入力フィールドをループできます。
document.getElementById（ 'calculate'）。onclick = function getQtyFields（）{
itemInputs = document.getElementsByName（ 'item'）
for（let i = 0; i ）を使用して、名前で要素を選択できます。
for（let i = 0; i

HTMLを動的に生成する

INVOICE " + "
準備：" + invoicedName + "、on" + "
" + invDate + "

" + フィールド+ "

" + "

热门问题

相关问题

HTMLを動的に生成する

热门问题

相关问题

最新问题