innter.HTML not working after submit button is clicked
- by user1781453
I am trying to get the innerHTML to change to what is in the end of the function "calculate" but nothing happens once I hit submit.
Here is my code:
Pizza Order Form
.outp {border-style:solid;background-color:white;
border-color:red;padding:1em; border-width: .5em;}
.notes {font-size:smaller;font-style:italic;}
p {margin-left: 15%; width: 65%;}
textarea {resize : none;}
</style>
function calculate(){
var type;
var newline="";
var sum=0;
var toppings="";
if( document.getElementById("small").checked==true){
type="Small Pizza";
sum+=4;
}
if( document.getElementById("medium").checked==true){
type="Medium Pizza";
sum+=6;
}
if( document.getElementById("large").checked==true){
type="Large Pizza";
sum+=8;
}
if( document.getElementById("pepperoni").checked==true){
toppings=toppings+"pepperoni, ";
sum+=0.75;
}
if( document.getElementById("olives").checked==true){
toppings=toppings+"olives, ";
sum+=0.6;
}
if( document.getElementById("sausage").checked==true){
toppings=toppings+"sausage, ";
sum+=0.75;
}
if( document.getElementById("peppers").checked==true){
toppings=toppings+"peppers, ";
sum+=0.5;
}
if( document.getElementById("onions").checked==true){
toppings=toppings+"onions, ";
sum+=0.5;
}
if( document.getElementById("cheese").checked==true){
toppings=toppings+"Cheese Only, ";
}
var length = toppings.length;
toppings = toppings.slice(0,length-2);
document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum;
}
Joe's Pizza Palace
On-line Order Form
<p id = "op" class = "outp" > <b /> Select the size Pizza you want:
<input type="radio" name = "size" id="small" value = "small"> Small - $4.00 <b />
<input type="radio" name = "size" id="medium" value = "medium"> Medium - $6.00 <b />
<input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b />
</p>
<p id = "op1" class = "outp" > <b /> Select the toppings:
<input type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b />
<input type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b />
<input type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br />
<input type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b />
<input type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b />
<input type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />
To obtain the price of your order click on the price button below:
<br /><br />
<input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/>
<input type="reset" align = "left" value="Clear Form"/>
<br /><br />
<textarea class="outp3" id="opta" style="border-color:black;" rows="6" cols="40" >
</textarea>
