So I'm starting with JavaScript and I was trying to make a product selection form.
I want it to display the individual prices and then the total but problem comes when displaying the total, I have no idea how to make that function. Im not using JQuery by the way. If you can come up with something it'll be really helpful. Thanks!
//Pricelist
var aa = 7;
var ab = 5;
var ba = 1;
var bb = 3;
var bc = 5;
//Defined Variables
document.getElementById("Pizza").value = aa;
document.getElementById("Burguer").value = ab;
document.getElementById("Small").value = ba;
document.getElementById("Medium").value = bb;
document.getElementById("Large").value = bc;
//Display the prices
function decirValue() {
if(document.getElementById('Pizza').checked) {
document.getElementById("dispa").innerHTML
= document.getElementById("Pizza").value + " $ for the meal";
}
else if(document.getElementById('Burguer').checked) {
document.getElementById("dispa").innerHTML
= document.getElementById("Burguer").value + " $ for the meal";
}
if(document.getElementById('Small').checked) {
document.getElementById("dispb").innerHTML
= document.getElementById("Small").value + " $ for the size";
}
else if(document.getElementById('Medium').checked) {
document.getElementById("dispb").innerHTML
= document.getElementById("Medium").value + " $ for the size";
}
else if(document.getElementById('Large').checked) {
document.getElementById("dispb").innerHTML
= document.getElementById("Large").value + " $ for the size";
}
}<!DOCTYPE html>
<html>
<body>
<form id="jsform">
<h3>Select a meal</h3>
<input type="radio" class="stylebtn" name="food" id="Pizza" value="" checked="checked">Pizza<br>
<input type="radio" class="stylebtn" name="food" id="Burguer" value="">Burguer<br>
<h3>Select size</h3>
<input type="radio" class="stylebtn" name="dimensions" id="Small" value="" checked="checked">Small<br>
<input type="radio" class="stylebtn" name="dimensions" id="Medium" value="">Medium<br>
<input type="radio" class="stylebtn" name="dimensions" id="Large" value="">Large<br><br>
<button type="button" onclick="decirValue();">Submit</button>
<br>
<h4 id="dispa"></h4>
<h4 id="dispb"></h4>
<h4 id="totalprice">0 $</h4>
</form>
</body>
</html>Here's the HTML
<h3>Select a meal</h3>
<input type="radio" class="stylebtn" name="food" id="Pizza" value="" checked="checked">Pizza<br>
<input type="radio" class="stylebtn" name="food" id="Burguer" value="">Burguer<br>
<h3>Select size</h3>
<input type="radio" class="stylebtn" name="dimensions" id="Small" value="" checked="checked">Small<br>
<input type="radio" class="stylebtn" name="dimensions" id="Medium" value="">Medium<br>
<input type="radio" class="stylebtn" name="dimensions" id="Large" value="">Large<br><br>
<button type="button" onclick="decirValue();">Submit</button>
<br>
<h4 id="dispa"></h4>
<h4 id="dispb"></h4>
<h4 id="totalprice">0 $</h4>
</form>
And here's the JavaScript
//Pricelist
var aa = 7;
var ab = 5;
var ba = 1;
var bb = 3;
var bc = 5;
//Defined Variables
document.getElementById("Pizza").value = aa;
document.getElementById("Burguer").value = ab;
document.getElementById("Small").value = ba;
document.getElementById("Medium").value = bb;
document.getElementById("Large").value = bc;
//Display the prices
function decirValue() {
if(document.getElementById('Pizza').checked) {
document.getElementById("dispa").innerHTML
= document.getElementById("Pizza").value + " $ for the meal";
}
else if(document.getElementById('Burguer').checked) {
document.getElementById("dispa").innerHTML
= document.getElementById("Burguer").value + " $ for the meal";
}
if(document.getElementById('Small').checked) {
document.getElementById("dispb").innerHTML
= document.getElementById("Small").value + " $ for the size";
}
else if(document.getElementById('Medium').checked) {
document.getElementById("dispb").innerHTML
= document.getElementById("Medium").value + " $ for the size";
}
else if(document.getElementById('Large').checked) {
document.getElementById("dispb").innerHTML
= document.getElementById("Large").value + " $ for the size";
}
}
Aucun commentaire:
Enregistrer un commentaire