Preisrechner
Hallo Leute,
habe ein kleines Problem, bin leider noch Anfänger im Bereich PHP, habe jetzt eine Script zum Preis berechnen mit Checkbox und Radio Buttons.
Meine Frage kann mir vielleicht vielleicht jemand helfen das Script so umzuschreiben das ich auch Drop Down Felder bzw Textfelder mit mengen angaben einfügen kann?
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bestellformular</title>
<style>
.row{
display:flex;
width:500px;
margin:0 auto;
}
.row *{
flex:1;
text-align:center;
}
#all{
justify-content:flex-end;
display:flex;
margin:0 auto;
border-top:3px solid black;
width:500px;
}
#all *{
width: 25%;
text-align:center
}
</style>
</head>
<body>
<div id="out"></div>
<div id="alles"></div>
<script>
ausgang=document.getElementById('out');
// Artikel - Preis - Wie oft verfügbar
arra=[
['Dvd1','2.21','8'],
['cd1','22.01','3'],
['Video','12.21','5'],
['Stuhl','33.21','18'],
['Router','40.28','11'],
['Milch','22.71','1'],
['Brot','22.21','5'],
['Taback','15.18','8'],
['Käse','27.35','3'],
['bier','25.21','8']];
var sammeln='';
for(h=0;h<arra.length;h++){
var sel='';
for(j=0;j<=arra[h][2];j++){
sel+=`<option value="${j}">${j}x</option>`;
}
sammeln+=`<div class="row"><input name="${arra[h][0]}" id="check${h}" type="checkbox" value="${arra[h][1]}"> <span>${arra[h][0]} - ${arra[h][1]}</span><select id="anzahl${h}">${sel}</select><div class="ges"></div></div>`;
}
ausgang.innerHTML=sammeln;
chang=document.querySelectorAll('input,select');
chang.forEach(function(j){
j.addEventListener('change',function(){
aktualisieren()
})
})
function aktualisieren() {
var help1=0;
var help2=0;
ele=document.querySelectorAll('.row');
ele.forEach(function(s){
if(s.querySelector('input').checked){
prei=s.querySelector('input').value; sele=s.querySelector('select');
if(sele.value!=0){
insge=prei*sele.value;
help1+=parseInt(sele.value);
help2=insge+help2;
const gep=help2.toFixed(2);
document.getElementById('alles').innerHTML=`<div id="all"><div id="gesanzahl">Menge ${help1}</div><div id="gespreis">Preis ${gep}</div></div>`;
s.querySelector('.ges').innerHTML=insge.toFixed(2);
}
}
})
}
</script>
</body></html>