3种类型的按钮，使他们添加数字

Question

我试图为电影剧集制定预订系统。在这个系统中，我添加了3种类型的按钮，3个按钮有不同的ID。例如，现在我想让1个按钮显示6欧元。第二个按钮8欧元，然后当我点击多个按钮的价格需要添加和保存，所以我可以去这个剧本的下一个阶段。我尝试了很多谷歌搜索，但我得到的是吓唬迷你游戏 - - 如果任何人都可以帮助thnx。

<td><button onclick="kaartverkoop1()" id="kaartverkoop1">B</button></td> 
<td><button onclick="kaartverkoop1()" id="kaartverkoop1">B</button></td> 
<td><button id="kaartverkoop2">O</button></td> 
<td><button id="kaartverkoop2">O</button></td> 
<td></td 

这是两种按钮类型的示例。我试图为按钮创建一个函数，并与“kaartverkoop1（）”的代码一起工作。

function kaartverkoop1(stoel, soort){ 
     if (document.getElementById("resultaat").innerHTML == "") { 
      document.getElementById("resultaat").innerHTML = "De stoel die u heeft gekozen is :"; 
     } 

     document.getElementById("resultaat").innerHTML+= stoel + ","; 
     document.getElementById("resultaat1").innerHTML= "De prijs is "; 
     document.getElementById("resultaat2").innerHTML= "De zaal die u heeft gekozen is Zaal 1 "; 
     document.getElementById("bestel").innerHTML= "Bestel"; 
     document.getElementById("annuleer").innerHTML= "Annuleer"; 
     } 

所以，如果任何人都可以帮助我，我会成为gratefull。

诚恳，

杜尚

Answer 1

我希望这是你在找什么：http://jsfiddle.net/1qasuuap/

使用多个项目时，我就从ID的远离，因为你不能有多个ID的，它会打破JavaScript：

var buttons = document.querySelectorAll('button[data-price]'); 

var buttonClicked = function (event) { 
    var element = event.target; 
    var price = parseInt(element.data('price')); 
    var totalElement = document.querySelector('[data-total]'); 
    var total = parseInt(totalElement.data('total')); 

    if (element.hasClass('active')) { 
     element.removeClass('active'); 
     total = total - price; 
    } else { 
     element.addClass('active'); 
     total = total + price; 
    } 

    totalElement.data('total', total); 
    totalElement.innerHTML = total; 
}; 

for (var b = 0; b < buttons.length; b++) { 
    var button = buttons[b]; 
    button.addEventListener('click', buttonClicked); 
} 

改为使用数据属性。