Javascript 输入更改值div'；动态更新内容

我对javascript有点陌生。我想动态地将总值乘以天数值。我试了一段时间，但找不到解决办法。提前谢谢

$（文档）.ready（函数（）{
$（'.kalorie'）。单击（函数（）{
var varKalorie=$（'input[name=kalorie]：checked'）.val（）
$（'.posilki'）.prop（“禁用”，false）；
如果（varKalorie==1000）{
$（'.posilki'）。单击（函数（）{
var合计=0；
$（'.posilki:checked'）。每个（函数（）{
var posilkiChecked=$（'.posilki:checked'）。长度；
如果（posilkiChecked>=3）{
posilkiEach=parseFloat（$（this.val（））；
总+=posilkiEach；
$（'.qtyminus'）.prop（“禁用”，false）；
$（'.qtyplus'）.prop（“禁用”，false）；
}否则{
total=“Musisz zaznaczyc przynajmniej 3 dania”；
}
});
$（'#total'）.html（总计）；
});
}
如果（varKalorie==1250）{
$（'.posilki'）。单击（函数（）{
var合计=0；
$（'.posilki:checked'）。每个（函数（）{
var posilkiChecked=$（'.posilki:checked'）。长度；
如果（posilkiChecked>=3）{
posilkiEach=parseFloat（$（this.val（））*1.1；
总+=posilkiEach；
$（'.qtyminus'）.prop（“禁用”，false）；
$（'.qtyplus'）.prop（“禁用”，false）；
}否则{
total=“Musisz zaznaczyc przynajmniej 3 dania”；
}
});
$（'#total'）.html（total+pln'）；
});
}
如果（varKalorie==1500）{
$（'.posilki'）。单击（函数（）{
var合计=0；
$（'.posilki:checked'）。每个（函数（）{
var posilkiChecked=$（'.posilki:checked'）。长度；
如果（posilkiChecked>=3）{
posilkiEach=parseFloat（$（this.val（））*1.2；
总+=posilkiEach；
$（'.qtyminus'）.prop（“禁用”，false）；
$（'.qtyplus'）.prop（“禁用”，false）；
}否则{
total=“Musisz zaznaczyc przynajmniej 3 dania”；
}
});
$（'#total'）.html（total+pln'）；
});
}
如果（varKalorie==2000）{
$（'.posilki'）。单击（函数（）{
var合计=0；
$（'.posilki:checked'）。每个（函数（）{
var posilkiChecked=$（'.posilki:checked'）。长度；
如果（posilkiChecked>=3）{
posilkiEach=parseFloat（$（this.val（））*1.4；
总+=posilkiEach；
$（'.qtyminus'）.prop（“禁用”，false）；
$（'.qtyplus'）.prop（“禁用”，false）；
}否则{
total=“Musisz zaznaczyc przynajmniej 3 dania”；
}
});
$（'#total'）.html（total+pln'）；
});
}
如果（varKalorie==2500）{
$（'.posilki'）。单击（函数（）{
var合计=0；
$（'.posilki:checked'）。每个（函数（）{
var posilkiChecked=$（'.posilki:checked'）。长度；
如果（posilkiChecked>=3）{
posilkiEach=parseFloat（$（this.val（））*1.6；
总+=posilkiEach；
$（'.qtyminus'）.prop（“禁用”，false）；
$（'.qtyplus'）.prop（“禁用”，false）；
}否则{
total=“Musisz zaznaczyc przynajmniej 3 dania”；
}
});
$（'#total'）.html（total+pln'）；
});
}
});
log（$（'#total'）.text（））；
//此按钮将增加值
$（'.qtyplus'）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
//获取字段名
fieldName=$（this.attr（'field'）；
//获取其当前值
var currentVal=parseInt（$（'input[name='+fieldName+']'）.val（））；
//如果不是未定义的
如果（！isNaN（currentVal））{
//增量
$（'input[name='+fieldName+']'）.val（currentVal+1）；
}否则{
//否则，在那里放一个0
$（'input[name='+fieldName+']'）.val（0）；
}
});
//此按钮将使该值递减至0
$（“.qtyminus”）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
//获取字段名
fieldName=$（this.attr（'field'）；
//获取其当前值
var currentVal=parseInt（$（'input[name='+fieldName+']'）.val（））；
//如果它不是未定义的或大于0
如果（！isNaN（currentVal）&¤tVal>0）{
//减量一
$（'input[name='+fieldName+']'）.val（currentVal-1）；
}否则{
//否则，在那里放一个0
$（'input[name='+fieldName+']'）.val（0）；
}
});
})

森尼克
1000
1250
1500
2000
2500




Śniadanie
2Śniadanie
奥比德
波德维乔雷克
科拉克亚

天



总计：
0 zł

既然您提到的是javascript新手。。。我的主要信息是把东西放在函数中

这迫使你思考：“好吧，我到底需要知道什么才能完成这个任务？”。。。这些是函数的参数

当然，Ad函数大大减少了代码，您不必将所有内容复制/粘贴6次

注意：如果需要，可以将所有函数放在document.ready中

哦，是的，我添加了标签元素。这样对客户更友好

是这个吗

<div class="container">
  <h2 class="global-title">Cennik</h2>

  <input type="radio" name="kalorie" class="kalorie" value="1000" id="r0" /><label for="r0">1000</label>
  <input type="radio" name="kalorie" class="kalorie" value="1250" id="r1" /><label for="r1">1250</label>
  <input type="radio" name="kalorie" class="kalorie" value="1500" id="r2" /><label for="r2">1500</label>
  <input type="radio" name="kalorie" class="kalorie" value="2000" id="r3" /><label for="r3">2000</label>
  <input type="radio" name="kalorie" class="kalorie" value="2500" id="r4" /><label for="r4">2500</label>
  <br/><br/>

  <input type="checkbox" class="posilki" id="sniadanie" value="15" ><label for="sniadanie">Sniadanie</label>
  <input type="checkbox" class="posilki" id="sniadanie2" value="10" ><label for="sniadanie2">2 Sniadanie</label>
  <input type="checkbox" class="posilki" id="obiad" value="20" ><label for="obiad">obiad</label>
  <input type="checkbox" class="posilki" id="podwieczorek" value="10" ><label for="podwieczorek">podwieczorek</label>
  <input type="checkbox" class="posilki" id="kolacja" value="15" ><label for="kolacja">kolacja</label>
  <br/><br/>Days

  <input type="button" value="-" class="qtyminus" field="quantity" >
  <input type="text" name="quantity" value="30" class="qty" id="days-input" >
  <input type="button" value="+" class="qtyplus" field="quantity" >

  <br/>
  <br/>Total:
  <div id="total">0 zl</div>
</div>
<style>
label {
  cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

// calculates the total price, displays it in id="total"
function calculateTotal(sum_price, days) {
  var result = sum_price * days;
  $('#total').html(result + ' zl');
  return result; // not really being used
}

// reads the checked checkboxes, returns their sum value
function readSumPrice() {
  var sum = 0;
  $('.posilki').each(function(i) {
    if(this.checked) {
      sum += Number($(this).val());
    }
  });
  return sum;  
}

// what ever the client changes, triggers this function.  We don't really care what has just been clicked on, we have to recalculate it anyway.
function somethingChanged() {
  // first we want to check if three meals have been chosen
  var numberOfMealsChosen = $( ".posilki:checked" ).length;
  if(numberOfMealsChosen >= 3) {
    // now we calculate
    var sum_price = readSumPrice();
    var days = Number($('#days-input').val());
    calculateTotal(sum_price, days);
  }
  else {
    $('#total').html('please choose 3 items');
  }
}

// now the events
$(document).ready(function() {
  // click on +
  $('.qtyplus').click(function() {
    var days = Number($('#days-input').val());
    $('#days-input').val(days + 1);
    somethingChanged();
  });

  // click on -
  $('.qtyminus').click(function() {
    var days = Number($('#days-input').val());
    // let's put 0 as minimum
    if(days > 0) {
      $('#days-input').val(days - 1);
      somethingChanged();
    }
  });

  // click on checkbox
  $('.posilki').click(function() {
    somethingChanged();
  });

  // click on radio.  triggers the calculation but doesn't really affect anything (yet?)
  $('.kalorie').click(function() {
    somethingChanged();
  });

});

</script>

森尼克
1000
1250
1500
2000
2500



斯尼亚达尼
2斯尼亚达尼
奥比德
波德维乔雷克
科拉克亚


天



总计：
0兹尔
标签{
光标：指针；
}
//计算总价，并将其显示在id=“total”中
函数计算总计（总价，天）{
var结果=总价格*天；
$（'#total'）.html（结果+'zl'）；
返回结果；//未实际使用
}
//读取复选框，返回其总和值
函数readSumPrice（）{
var总和=0；
$（'.posilki'）。每个（函数（i）{
如果（选中此项）{
sum+=数字（$（this.val（））；
}
});
回报金额；
}
//客户端的任何更改都会触发此函数。W