javascript - jS 代码不工作，不显示总数

Question

我正在尝试使用 JS 计算三个值，但未计算总和。它从表单元素中获取值，然后函数 calculateTotal() 被调用 onchange。但是没有显示总数。*我是stackoverflow的新手，请客气!

我试图在表单上使用 Post 方法，但已将其删除。还删除了所有样式。

function getpkgPriceA() {
  //Get a reference to the form id="Mangoform"
  var theForm = document.forms["Mangoform"];
  //Get a reference to the select id="qtyA"
  var QuantityA = theForm.elements["qtyA"];
  if (QuantityA == null || QuantityA === false) {
    var totalpkgPriceA = 0;
    return totalpkgPriceA;
  } else {
    var totalpkgPriceA = 5.99 * QuantityA.value;
    return totalpkgPriceA;
  }
}

function getpkgPriceB() {
  //Get a reference to the form id="Mangoform"
  var theForm = document.forms["Mangoform"];
  //Get a reference to the select id="qtyB"
  var QuantityB = theForm.elements["qtyB"];
  if (QuantityB == null || QuantityB === false) {
    var totalpkgPriceB = 0;
    return totalpkgPriceB;
  } else {
    var totalpkgPriceB = 12.99 * QuantityB.value;
    return totalpkgPriceB;
  }
}

function getpkgPriceC() {
  //Get a reference to the form id="Mangoform"
  var theForm = document.forms["Mangoform"];
  //Get a reference to the select id="qtyC"
  var QuantityC = theForm.elements["qtyC"];
  if (QuantityC == null || QuantityC === false) {
    var totalpkgPriceC = 0;
    return totapkgPriceC;
  } else {
    var totalpkgPriceC = 17.99 * QuantityC.value;
    return totalpkgPriceC;
  }
}

function calculateTotal() {

  var TotalpkgPrice = getpkgPriceA() + getpkgPriceB() + getpkgPriceC() + 2;
  //display the result
  var divobj = document.getElementById('totalprice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Your Total: £"
  TotalpkgPrice.toFixed(2);
}

function hideTotal() {
  var divobj = document.getElementById('totalprice');
  divobj.style.display = 'none';
}

<form action="#" id="Mangoform">
  <div>
    <div>
      <div>
        <span>Small: 1.3kg</span>
        <input type="number" id="qtyA" name="qtyA" placeholder="Quantity" onchange="calculateTotal()" min="1" max="100">
      </div>
      </br>
      <div>
        <span>Large: 3.3kg</span>
        <input type="number" id="qtyB" name="qtyB" placeholder="Quantity" onchange="calculateTotal()" min="1" max="100">
      </div>
      </br>
      <div>
        <span>Small: 5.0kg</span>
        <input type="number" id="qtyC" name="qtyC" placeholder="Quantity" onchange="calculateTotal()" min="1" max="100">
      </div>
    </div>
  </div>
  <span id="totalprice" name='totalprice'>Your Total:</span>
  <div>
    <input name="submit" type="submit" value="submit" onclick="calculateTotal()">
  </div>
</form>

如果 qtyA=1、qtyB=1 和 qtyC=1 中的值加上 2，则应显示总数
作为 38.97

(5.99*1)+(12.99*1)+(17.99*1)+2=38.97

如果 qtyA=2，qtyB=2 且 qtyC=3 加 2(5.99*2)+(12.99*2)+(17.99*3)+2=93.93

请指出错误。谢谢。

Answer 1

getpkgPriceA 函数中有一个额外的右大括号。您只需要删除它，还需要在添加字符串时添加 + 符号:

"Your Total: £" + TotalpkgPrice.toFixed(2);

试试这个:

function getpkgPriceA(){
    //Get a reference to the form id="Mangoform"
    var theForm = document.forms["Mangoform"];
    //Get a reference to the select id="qtyA"
    var QuantityA=theForm.elements["qtyA"];
    if(QuantityA==null || QuantityA===false){
        var totalpkgPriceA = 0;
        return totalpkgPriceA;
    }
        var totalpkgPriceA = 5.99 * QuantityA.value;
        return totalpkgPriceA;
}

function getpkgPriceB(){
    //Get a reference to the form id="Mangoform"
    var theForm = document.forms["Mangoform"];
    //Get a reference to the select id="qtyB"
    var QuantityB=theForm.elements["qtyB"];
    if(QuantityB==null || QuantityB===false){
        var totalpkgPriceB = 0;
        return totalpkgPriceB;
    }
    else{
        var totalpkgPriceB = 12.99 * QuantityB.value;
        return totalpkgPriceB;
    }
}

function getpkgPriceC(){
    //Get a reference to the form id="Mangoform"
    var theForm = document.forms["Mangoform"];
    //Get a reference to the select id="qtyC"

    var QuantityC=theForm.elements["qtyC"];
    if(QuantityC==null || QuantityC===false){
        var totalpkgPriceC = 0;
        return totapkgPriceC;
    }
    else{
        var totalpkgPriceC = 17.99 * QuantityC.value;
        return totalpkgPriceC;
    }
}

function calculateTotal(){
    var TotalpkgPrice =  getpkgPriceA() + getpkgPriceB() + getpkgPriceC() +2; 
    //display the result
    var divobj = document.getElementById('totalprice');
    divobj.style.display='block';
    divobj.innerHTML = "Your Total: £" + TotalpkgPrice.toFixed(2)  ;
   }

function hideTotal(){
  var divobj = document.getElementById('totalprice');
    divobj.style.display='none';
}

<form  action="#" id="Mangoform">
    <div >                      
    <div>
    <div> 
            <span>
                Small: 1.3kg 
            </span>
            <input  type="number" id="qtyA" name="qtyA"  placeholder="Quantity" onchange="calculateTotal()" min="1" max="100" > 
        </div>
        </br>
        <div>
        <span>
            Large: 3.3kg 
        </span>
        <input type="number" id="qtyB" name="qtyB"  placeholder="Quantity" onchange="calculateTotal()" min="1" max="100" > 
        </div>
        </br>
        <div>
            <span>
                Small: 5.0kg 
            </span>
            <input type="number" id="qtyC" name="qtyC"  placeholder="Quantity" onchange="calculateTotal()" min="1" max="100" > 
        </div> 
        </div>
        </div>
        <span id="totalprice" name='totalprice'>
            Your Total:
        </span>
        <div>  
            <input name="submit" type="submit" value="submit" onclick="calculateTotal()" >
        </div>

</form>