基本的なJS、HTML、CSSを使用して簡単な製品コンフィグレータを作成するテクニック

Question

javascriptコードを構成する最善の手法や方法についてのヒントやヒントはありますか？どのように配列、値、関数を正しい方法で組み合わせるか。私はスムージーショップオーナーのためのツールを作る必要があります。そこでは顧客が選択した成分を選ぶことができますが、例えば砂糖とビタミンの合計量を計算する必要があります。そして、私はどのようにこれらのすべてのパラメータをJavascriptに組み合わせるのか把握できません。

EarlyBirdSmootie：アップル：ビタミンA = UI200ビタミンC = UI300シュガー= 200mgの

梨：オレンジC = UI 3000ビタミンA = UI1000シュガー= 250mgの

オレンジ：ビタミンC = UI3000砂糖= 250mg

各果物にはビタミンとシュガーの特別な混合物があります。オレンジ= C ビタミン3000UI + 250mgの砂糖スタッフがAppleとのスムージーを注文するので、概要 と

製品ビルダー、梨&オレンジ我々はVitaminsUIとSugarMG +ビューの合計額を知っておく必要があります各成分の個々のビタミンとシュガーの。

我々は追加または削除し、スープに成分+再利用することができスープベストセラーのリストを作成できるようにする必要が作成した製品 好ましいの編集オプション。

これにはどのような方法を使用すればよいのですか？

をここではこれまでのところ、私のモックアップです： http://madsschou.com//YuppieSmootieTest/index.html

あなたは私のことができるようにする必要があります見ての通り、私は聞くが、私は私が軌道に乗ることができますので、これを行うだろうかの大まかな推定が行われてい

すべての砂糖とビタミンのレベルが表示されている間に、材料を追加し、量、カートに入れてください。

// Custom function 
 
function calculateTip() { 
 

 
// Store the data of inputs 
 
var vitaminTypes = document.getElementById("vitaminTypes").value; 
 
var vitaminAmount = document.getElementById("vitaminAmount").value; 
 
var sugarAmount = document.getElementById("sugarAmount").value; 
 
var ingredientTypes = document.getElementById("ingredientTypes").value; 
 
    
 
// Quick validation 
 
if(fruitAmount === "" || serviceQuality == 0) { 
 
window.alert("Please enter some values to get this up and running!"); 
 
return; // this will prevent the function from continuing 
 
} 
 
    
 
// Check to see if this input is empty or less than or equal to 1 
 
if(numFruits === "" || numFruits <= 1) { 
 
numPeople = 1; 
 
     
 
document.getElementById("each").style.display = "none";   
 
} else { 
 
     
 
document.getElementById("each").style.display = "block";   
 
} 
 
    
 
// Do some math! 
 
var total = (vitaminType * vitaminAmount) ; 
 
total = Math.round(total * 100); 
 
total = total.toFixed(2); 
 
    
 
    
 
// Display the content! 
 
document.getElementById("totalAmount").style.display = "block"; 
 
document.getElementById("amount").innerHTML = total; 
 
} 
 

 
// Hide the content info amount on load 
 
document.getElementById("totalAmount").style.display = "none"; 
 
document.getElementById("each").style.display = "none"; 
 

 
// Clicking the button calls our custom function 
 
document.getElementById("calculate").onclick = function() { calculateAmount(); }

Answer 1

正直なところ、私は完全にあなたのコードを理解していないと言ってますが、ここに私の提案のいくつかされています

• この1のように、===と==を置き換える：serviceQuality == 0を、ので、 javascriptは、==の比較を行うときに強制するでしょう：'' == 0 // true
• It関数内で変数numPeopleが初期化されていないようです。これにより、関数は純粋ではなくなり、後でコードベースが大きくなるとバグが発生する可能性があります。それを引数として使ってみてください
• jsコードで多くのスタイルを扱っているようですが、これはCSSと擬似クラス（:validなど）によっても可能です。 CSSを使用すると、コードが簡単になるだけでなく、より堅牢になります。このようなスタイルの操作を行うと、多くの再描画が発生します。 CSSに切り替える場合は、readingもお勧めします。
• 私は、この点についてはよく分からないが、私は直接onclick方法
• を添付したり、簡単に作業を行うことができるAngular2、エンバーは、
を達成するためにあなたが反応するようないくつかのフレームワークを試すことができますよりも、それは addEventListener('click', ...)を使用する方が良いと思います

これらの情報が役立つことを願っています。 \ [.__。]/