我的JavaScript出现问题。我使用Bootstrap stepper函数构建表单以构建产品配置器。价格需要通过用户选择的选项来计算，我想在JavaScript中执行此操作，因为我想进行实时计算，以便客户可以直接看到价格的变化。
问题是我在输出中遇到NaN错误。
如果我只在getPootPrijs(poot)函数中使用getKleurPrijs(kleur)中的calculateTotal，则可以在表格的1步上正确完成计算。如果同时执行两个步骤，则会得到NaN。
//poot berekenen
var poot_prices = new Array();
poot_prices["poot1"] = 20.75;
poot_prices["poot2"] = 25;
poot_prices["poot3"] = 35;
function getPootPrijs(poot) {
var pootRadio = document.getElementsByName('selectedOption');
for (i = 0; i < pootRadio.length; i++) {
if (pootRadio[i].checked) {
user_input = pootRadio[i].value;
}
}
return poot_prices[poot];
}
//kleur berekenen
var kleur_prices = new Array();
kleur_prices["kleur1"] = 5;
kleur_prices["kleur2"] = 10;
kleur_prices["kleur3"] = 15;
kleur_prices["kleur4"] = 20;
kleur_prices["kleur5"] = 25;
kleur_prices["kleur6"] = 30;
function getKleurPrijs(kleur) {
var kleurRadio = document.getElementsByName('selectedOptionTwo');
for (i = 0; i < kleurRadio.length; i++) {
if (kleurRadio[i].checked) {
user_input = kleurRadio[i].value;
}
}
return kleur_prices[kleur];
}
function calculateTotal(poot, kleur) {
var total = 29.95 + getPootPrijs(poot) + getKleurPrijs(kleur);
var totalEl = document.getElementById('totalPrice');
document.getElementById('totalPrice').innerHTML = "Totale maandprijs: €" + total;
totalEl.style.display = 'block';
}<div class="row pt-5 d-flex justify-content-center">
<!-- Grid column -->
<div class="col-md-1 pl-5 pl-md-0 pb-5">
<!-- Stepper -->
<div class="steps-form-3">
<div class="steps-row-3 setup-panel-3 d-flex justify-content-between">
<div class="steps-step-3">
<a href="#step-5" type="button" class="btn btn-info btn-circle-3 waves-effect ml-0" data-toggle="tooltip" data-placement="top" title="Hoofbord"><i class="fa fa-chalkboard" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3">
<a href="#step-6" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Kleur"><i class="fa fa-palette" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3">
<a href="#step-7" type="button" class="btn btn-pink btn-circle-3 waves-effect" data-toggle="tooltip" data-placement="top" title="Afmeting"><i class="fa fa-weight" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3">
<a href="#step-8" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Matras"><i class="fa fa-bed" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3">
<a href="#step-9" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Aanvraag afronden"><i class="fa fa-check" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-7">
<form role="form" action="output.php" method="post">
<!-- First Step -->
<div class="row setup-content-3" id="step-5">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Soort Poot</strong></h3>
<p>Poten zijn er in diverse soorten en maten. Welk soort poot wilt u??</p>
<div class="form-group md-form">
<ul>
<li2>
<input type='radio' value='poot1' name='selectedOption' id='poot1' required/>
<label for='poot1'><img src="bed1.jpg" style="height: 100px;" onclick="calculateTotal('poot1')"></img></label>
</li2>
<li2>
<input type='radio' value='poot2' name='selectedOption' id='poot2' />
<label for='poot2'><img src="bed2.jpg" style="height: 100px;" onclick="calculateTotal('poot2')"></img></label>
</li2>
<li2>
<input type='radio' value='poot3' name='selectedOption' id='poot3' />
<label for='poot3'><img src="bed3.jpg" style="height: 100px;" onclick="calculateTotal('poot3')"></img></label>
</li2>
</ul>
</div>
<br><br><br><br><br><br><br><button class="btn btn-primary btn-lg btn-rounded nextBtn-3 float-right" type="button">Volgende</button>
</div>
</div>
<!-- Second Step -->
<div class="row setup-content-3" id="step-6">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Bekleding en kleur</strong></h3>
<div class="form-group md-form">
<ul>
<li2>
<input type='radio' value='kleur1' name='selectedOptionTwo' id='kleur1' required/>
<label for='kleur1'><img src="bed1.jpg" style="height: 100px;" onclick="calculateTotal('kleur1')"></img></label><br>
</li2>
<li2>
<input type='radio' value='kleur2' name='selectedOptionTwo' id='kleur2' />
<label for='kleur2'><img src="bed2.jpg" style="height: 100px;" onclick="calculateTotal('kleur2')"></img></label><br>
</li2>
<li2>
<input type='radio' value='kleur3' name='selectedOptionTwo' id='kleur3' />
<label for='kleur3'><img src="bed3.jpg" style="height: 100px;" onclick="calculateTotal('kleur3')"></img></label><br>
</li2><br>
<li2>
<input type='radio' value='kleur4' name='selectedOptionTwo' id='kleur4' />
<label for='kleur4'><img src="bed2.jpg" style="height: 100px;" onclick="calculateTotal('kleur4')"></img></label><br>
</li2>
<li2>
<input type='radio' value='kleur5' name='selectedOptionTwo' id='kleur5' />
<label for='kleur5'><img src="bed3.jpg" style="height: 100px;" onclick="calculateTotal('kleur5')"></img></label><br>
</li2>
<li2>
<input type='radio' value='kleur6' name='selectedOptionTwo' id='kleur6' />
<label for='kleur6'><img src="bed3.jpg" style="height: 100px;" onclick="calculateTotal('kleur6')"></img></label><br>
</li2>
</ul>
</div><br><br>
<button class="btn btn-danger btn-rounded prevBtn-3 float-left" type="button">Vorige</button>
<button class="btn btn-primary btn-lg btn-rounded nextBtn-3 float-right" type="button">Volgende</button>
</div>
</div>
<!-- Third Step -->
<div class="row setup-content-3" id="step-7">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Breedte en lengte:</strong></h3>
<div class="form-check">
<ul>
<li2>
<div class="col">
<p>Breedte:</p>
</div>
<input type='radio' value='220cm' name='breedte' id='breedte1' required/>
<label for='breedte1'><img src="bed1.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='breedte2' name='breedte' id='breedte2' />
<label for='breedte2'><img src="bed2.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='breedte3' name='breedte' id='breedte3' />
<label for='breedte3'><img src="bed3.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='breedte4' name='breedte' id='breedte4' />
<label for='breedte4'><img src="bed2.jpg" style="height: 100px;"></img></label>
</li2>
</ul><br>
<ul>
<li2>
<div class="col">
<p>Lengte:</p>
</div>
<input type='radio' value='lengte1' name='lengte' id='lengte1' required/>
<label for='lengte1'><img src="bed1.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='lengte2' name='lengte' id='lengte2' />
<label for='lengte2'><img src="bed2.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='lengte3' name='lengte' id='lengte3' />
<label for='lengte3'><img src="bed3.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='lengte4' name='lengte' id='lengte4' />
<label for='lengte4'><img src="bed2.jpg" style="height: 100px;"></img></label>
</li2>
</ul>
</div>
<button class="btn btn-danger btn-rounded prevBtn-3 float-left" type="button">Vorige</button>
<button class="btn btn-primary btn-lg btn-rounded nextBtn-3 float-right" type="button">Volgende</button>
</div>
</div>
<!-- Fourth Step -->
<div class="row setup-content-3" id="step-8">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Keuze 5:</strong></h3>
<ul>
<li2>
<input type='radio' value='matras1' name='matras' id='matras1' required/>
<label for='matras1'><img src="bed1.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='matras2' name='matras' id='matras2' />
<label for='matras2'><img src="bed2.jpg" style="height: 100px;"></img></label><br>
</li2>
<li2>
<input type='radio' value='matras3' name='matras' id='matras3' />
<label for='matras3'><img src="bed3.jpg" style="height: 100px;"></img></label>
</li2>
</ul><br><br><br><br><br><br><br>
<button class="btn btn-danger btn-rounded prevBtn-3 float-left" type="button">Vorige</button>
<button class="btn btn-primary btn-lg btn-rounded nextBtn-3 float-right" type="button">Volgende</button>
</div>
</div>
<!-- Vijfde stap -->
<div class="row setup-content-3" id="step-9">
<div class="col-md-12">
<h2 class="text-center font-weight-bold my-4">Configuratie compleet. Vul uw gegevens in om te bestellen.</h2><br>
<h4><b>Uw maandbedrag</b>
<div id="totalPrice"></div>
</h4><br><br>
<tr>
<td colspan="1">
<fieldset>
<div class="form-group float-left">
<label class="col-md-4 control-label">Voornaam</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="voornaam" name="voornaam" placeholder="Uw Voornaam" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-right">
<label class="col-md-4 control-label">Achternaam</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="achternaam" name="achternaam" placeholder="Uw Achternaam" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-left">
<label class="col-md-4 control-label">Straat</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="straatnaam" name="straatnaam" placeholder="Straatnaam" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-right">
<label class="col-md-4 control-label">Huisnummer</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="huisnummer" name="huisnummer" placeholder="voorbeeld: 36" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-left">
<label class="col-md-4 control-label">Postcode</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="1234AB" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-right">
<label class="col-md-4 control-label">Plaatsnaam</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="plaatsnaam" name="plaatsnaam" placeholder="Plaatsnaam" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-left">
<label class="col-md-4 control-label">Telefoonnummer</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><input id="telefoonnummer" name="telefoonnummer" placeholder="0612345678" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-right">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group float-left">
<label class="col-md-12 control-label">Gaat u akkoord met de algemene voorwaarden?</label>
<div class="col-md-12 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="algemenevoorwaarden" name="algemenevoorwaarden" placeholder="algemenevoorwaarden" class="form-control" required="true" value="" type="checkbox"
style="max-width:15px;"></div>
</div>
</div>
</fieldset>
</td>
<br>
<button class="btn btn-danger btn-rounded prevBtn-3 float-left" type="button">Vorige</button>
<button class="btn btn-success btn-lg btn-rounded float-right" type="submit">Bestel</button>
</div>
</div><br><br>
</form>
</div>
<!-- Grid column -->
</div>
我希望有人可以进一步帮助我。
答案 0 :(得分：-1)
Solved it with a workarround.
In the form i changed the onclick to onclick="poot=10;calculateTotal();" the 10 number is the added value to the standard price.
<div class="row setup-content-3" id="step-5">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Soort Poot</strong></h3>
<div class="form-group md-form">
<ul>
<li2>
<input type='radio' value='poot1' name='selectedOption' id='poot1' required/>
<label for='poot1'><img src="bed1.jpg" style="height: 100px;" onclick="poot=10;calculateTotal();"></img></label>
</li2>
<li2>
<input type='radio' value='poot2' name='selectedOption' id='poot2'/>
<label for='poot2'><img src="bed2.jpg" style="height: 100px;" onclick="poot=20;calculateTotal();"></img></label>
</li2>
<li2>
<input type='radio' value='poot3' name='selectedOption' id='poot3'/>
<label for='poot3'><img src="bed3.jpg" style="height: 100px;" onclick="poot=30;calculateTotal();"></img></label>
</li2>
</ul>
</div>
<br><br><br><br><br><br><br><button class="btn btn-primary btn-lg btn-rounded nextBtn-3 float-right" type="button">Volgende</button>
</div>
</div>And i changed javascript to a much simpeler script.
var poot = 0;
var kleur = 0;
var breedte = 0;
var lengte = 0;
function calculateTotal() {
var total = 29.95 + poot + kleur + breedte + lengte;
var totalEl = document.getElementById('totalPrice');
document.getElementById('totalPrice').innerHTML = "Totale prijs: €" + total;
totalEl.style.display = 'block';
}with <div id="totalPrice"></div> i show the price on the form. Thanks for everyone who tried to answer this question!