onClick Event in Checkboxen funktioniert nicht!

<form name="liste">
    <ul class="Getraenkeliste">
        <li>Distelhäuser Pils<input type="checkbox" name="Distel" id="g1" value="2.90" onclick="calcPrice()" class="getraenk"></input> </li>
        <li>Würzburger Hofbräu<input  type="checkbox" name="WueHo" id="g2" value="3.90" onlcick="calcPrice()" class="getraenk"></input></li>
        <li>Sternla<input  type="checkbox" name="SternlaBier" id="g3" value="2.80" onlcick="calcPrice()" class="getraenk"></li>
        <li>Spalter<input  type="checkbox" name="SpalterBier" id="g4" value="2.50" onlcick="calcPrice()" class="getraenk"></li>
        <li>Salitos<input  type="checkbox" name="SalitosBier" id="g5" value="3.20" onlcick="calcPrice()" class="getraenk"></li>
        <li>Estrella<input type="checkbox" name="EstrellaBier" id="g6" value="3.00" onlcick="calcPrice()" class="getraenk"></li>
        <li>Weizen<input  type="checkbox" name="WeizenBier" id="g7" value="3.80" onlcick="calcPrice()" class="getraenk"></li>
    </ul>
</form>
    <div id="preisfeld">
        <p> 0.00 </p>
    </div>
    <input type="submit" name="Bestellbutton" value="Bestellen" onclick="calcPrice()">

var summe=0;
var i;

function calcPrice()
{
  var betrag;
  var betragf;
  var summe=0;

  for(i=0;i<7;i++)
  {
    if(document.liste.elements[i].checked)
    {
      betrag = document.liste.elements[i].value;
      betragf=parseFloat(betrag);
      summef=parseFloat(summe);
      summef=summef+betrag;
    }

  }

  var element = document.getElementById("preisfeld");
  element.innerHTML = String(betrag);
  return summef;
}