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: &nbsp;&nbsp;
    <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: &nbsp;&nbsp;
    <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>