複数のHTML項目を追加するためにjavaScriptを使用しますか？

Question

私は友人のためにウェブサイトを作っています。このウェブサイトでは、彼は顧客に対して4種類のサービスを提供しています。彼がウェブサイト上で望んでいるのは、顧客がアイコンをクリックできるようにすることであり、その隣には、そのサービスの価格が表示されます。彼はまた、顧客が他のアイコンをクリックできるようにし、彼らが選択したものに応じて価格が上昇することを望んでいる。

例：

サービス1 =£60

サービス2 =£80

サービス3 =£100

サービス4 =£120

顧客がサービス1をクリックし、総価格= 60ポンド。

お客様は、サービス2をクリックして合計価格=£140をクリックすることもできます。

私はこの作業を取得する方法を見つけ出すためにいくつかの時間のためにしようとしているが、私はJavaScriptで全く経験しておりませんので、私が思い付くために管理している最高のはこれです：

var service1 = 60; 
var service2 = 80; 
var service3 = 100; 
var service4 = 120; 

function myFunction() { 
document.getElementById("generated").innerHTML = service1; 
} 

function myFunction2() { 
document.getElementById("generated").innerHTML = service2; 
} 

function myFunction3() { 
document.getElementById("generated").innerHTML = service3; 
} 

function myFunction4() { 
document.getElementById("generated").innerHTML = service4; 
} 

もちろん、私のHTMLには個々のサービスごとにonclickタグがあり、それが "生成された" IDタグに価格を追加します。

ご協力いただきありがとうございます。 （jQueryのを使用して） ジョン

Answer 1

Javascriptコード

var prices = []; 
prices["service1"] = 60; 
prices["service2"] = 80; 
prices["service3"] = 100; 
prices["service4"] = 120; 

var generated = 0; 

$(".add_service").click(function() { 
    var desired_service = $(this).attr("id"); 
    generated += prices[desired_service]; 
    $("#generated").html("Total Price = £" + generated); 
}); 

がJSFiddle上でそれを試してみてください。私は同じクラスと4つのボタンを作成し、その後、私はjQueryの.click()方法で各ボタンのイベントハンドラをバインドされている

説明

。そして、クリックされたボタンのid属性を読み込むことで、どのサービスが必要かを知ることができます（jQuery .attr()メソッドのおかげで）。