Question

我的商店里有5件商品。如果用户购买2到5件物品，我想知道总账单多少。

我需要先添加我先购买的价值，然后再加上我要买的商品的价值，但唯一可能的是总账单会复制价格的价值。

请帮助我，我需要在1周后完成这项工作。

这是我的JavaScript代码：

<script language="javascript">
  function Clickme1(){
var quant1 = parseInt(document.getElementById("quantity1").value);
var total1 = "";
var totalbill = "";

    if(document.getElementById("small1").checked){
    radio1 = 100;
    document.getElementById("radio1")
    }
    else if(document.getElementById("medium1").checked){
    radio1 = 150;
    document.getElementById("radio1")
    }
    else if(document.getElementById("large1").checked){
    radio1 = 200;
    document.getElementById("radio1")
    }

total1 = radio1 * quant1;
document.getElementById("total1").value = total1;
totalbill = totalbill + total1;
document.getElementById("totalbill").value = totalbill;
}

  function Clickme2(){
var quant2 = parseInt(document.getElementById("quantity2").value);
var total2 = "";
var totalbill = "";

    if(document.getElementById("small2").checked){
    radio2 = 90;
    document.getElementById("radio2")
    }
    else if(document.getElementById("medium2").checked){
    radio2 = 100;
    document.getElementById("radio2")
    }
    else if(document.getElementById("large2").checked){
    radio2 = 150;
    document.getElementById("radio2")
    }

total2 = radio2 * quant2;
document.getElementById("total2").value = total2;
totalbill = totalbill + total2;
document.getElementById("totalbill").value = totalbill;
}

  function Clickme3(){
var quant3 = parseInt(document.getElementById("quantity3").value);
var total3 = "";
var totalbill = "";

    if(document.getElementById("small3").checked){
    radio3 = 80;
    document.getElementById("radio3")
    }
    else if(document.getElementById("medium3").checked){
    radio3 = 85;
    document.getElementById("radio3")
    }
    else if(document.getElementById("large3").checked){
    radio3 = 90;
    document.getElementById("radio3")
    }

total3 = radio3 * quant3;
document.getElementById("total3").value = total3;
totalbill = totalbill + total3;
document.getElementById("totalbill").value = totalbill;
}

  function Clickme4(){
var quant4 = parseInt(document.getElementById("quantity4").value);
var total4 = "";
var totalbill = "";

    if(document.getElementById("small4").checked){
    radio4 = 300;
    document.getElementById("radio4")
    }
    else if(document.getElementById("medium4").checked){
    radio4 = 350;
    document.getElementById("radio4")
    }
    else if(document.getElementById("large4").checked){
    radio4 = 380;
    document.getElementById("radio4")
    }

total4 = radio4 * quant4;
document.getElementById("total4").value = total4;
totalbill = totalbill + total4;
document.getElementById("totalbill").value = totalbill;
}


  function Clickme5(){
var quant5 = parseInt(document.getElementById("quantity5").value);
var total5 = "";
var totalbill = "";

    if(document.getElementById("small5").checked){
    radio5 = 400;
    document.getElementById("radio5")
    }
    else if(document.getElementById("medium5").checked){
    radio5 = 450;
    document.getElementById("radio5")
    }
    else if(document.getElementById("large5").checked){
    radio5 = 500;
    document.getElementById("radio5")
    }
total5 = radio5 * quant5;
document.getElementById("total5").value = total5;
totalbill = totalbill + total5;
document.getElementById("totalbill").value = totalbill;;
}

 </script>

这是我的HTML：

<center><table width="1000" border="1" cellspacing="0"></center>
<form name="myForm">
  <tr height="150">
     <td bgcolor="#FF8080"colspan="2"><center><font size="100">Welcome to my Store</font></center></td>
  </tr>
  <tr height="200">
     <td width="220"><center><img src="brook.jpg" width="200" heigth="200"></center></td>
     <td bgcolor="#F5D69F">Item Name: Brook T-shirt <br><br>
     <input type="radio" name="radio1" id="small1" value="small1" checked>Small <br>
     <input type="radio" name="radio1" id="medium1" value="medium1">Medium <br>
     <input type="radio" name="radio1" id="large1" value="large1">Large <br>
     <br><br> Quantity:<input type="text" name="quantity1" id="quantity1" value="">
         <input type="button" id="button1" value="   BUY   " onClick="javascript: Clickme1();">
     Price:<input type="text" name="quantity" id="total1" value=""></td>
  </tr>

  <tr height="200">
     <td width="220"><center><img src="cross.jpg" width="200" heigth="200"></center></td>
     <td bgcolor="#F5D69F">Item Name: Brook T-shirt <br><br>
     <input type="radio" name="radio2" id="small2" value="small2" checked>Small <br>
     <input type="radio" name="radio2" id="medium2" value="medium2">Medium <br>
     <input type="radio" name="radio2" id="large2" value="large2">Large <br>
     <br><br> Quantity:<input type="text" name="quantity2" id="quantity2" value="">
         <input type="button" id="button1" value="   BUY   " onClick="javascript: Clickme2();">
     Price:<input type="text" name="quantity2" id="total2" value=""></td>
  </tr>

  <tr height="200">
     <td width="220"><center><img src="plain.jpg" width="200" heigth="200"></center></td>
     <td bgcolor="#F5D69F">Item Name: Plain T-shirt <br><br>
     <input type="radio" name="radio3" id="small3" value="small3" checked>Small <br>
     <input type="radio" name="radio3" id="medium3" value="medium3">Medium <br>
     <input type="radio" name="radio3" id="large3" value="large3">Large <br>
     <br><br> Quantity:<input type="text" name="quantity3" id="quantity3" value="">
         <input type="button" id="button1" value="   BUY   " onClick="javascript: Clickme3();">
     Price:<input type="text" name="quantity3" id="total3" value=""></td>
  </tr>

  <tr height="200">
     <td width="220"><center><img src="long.jpeg" width="200" heigth="200"></center></td>
     <td bgcolor="#F5D69F">Item Name: Long Sleeves <br><br>
     <input type="radio" name="radio4" id="small4" value="small4" checked>Small <br>
     <input type="radio" name="radio4" id="medium4" value="medium4">Medium <br>
     <input type="radio" name="radio4" id="large4" value="large4">Large <br>
     <br><br> Quantity:<input type="text" name="quantity4" id="quantity4" value="">
         <input type="button" id="button1" value="   BUY   " onClick="javascript: Clickme4();">
     Price:<input type="text" name="quantity4" id="total4" value=""></td>
  </tr>

  <tr height="200">
     <td width="220"><center><img src="polo.jpeg" width="200" heigth="200"></center></td>
     <td bgcolor="#F5D69F">Item Name: Polo Shirt <br><br>
     <input type="radio" name="radio5" id="small5" value="small5" checked>Small <br>
     <input type="radio" name="radio5" id="medium5" value="medium5">Medium <br>
     <input type="radio" name="radio5" id="large5" value="large5">Large <br>
     <br><br> Quantity:<input type="text" name="quantity5" id="quantity5" value="">
         <input type="button" id="button1" value="   BUY   " onClick="javascript: Clickme5();">
     Price:<input type="text" name="quantity5" id="total5" value=""></td>
  </tr>

  <tr>
    <td colspan="2" height="50" bgcolor="#CCFFB2">TOTALBILL:<input type="text" name="total" id="totalbill" value="" size="25"></td>
  </tr>

</form>
</table>

Answer 1

问题是你在所有函数中定义totalBill，只为最后一个被调用的函数设置值。

因此，只需将totalBill定义一次，默认值为0，高于所有功能。

另请注意，您已将单个函数的总数（例如total1，total2等）定义为""，这是空字符串但值应为整数，因此将其设置为{{1 }}

检查工作代码段

var totalbill = 0;  // Defined only for once with initial value to zero
function Clickme1() {
    var quant1 = parseInt(document.getElementById("quantity1").value);
    var total1 = 0;
    var radio1 = 1;

    if (document.getElementById("small1").checked) {
      radio1 = 100;
      document.getElementById("radio1")
    } else if (document.getElementById("medium1").checked) {
      radio1 = 150;
      document.getElementById("radio1")
    } else if (document.getElementById("large1").checked) {
      radio1 = 200;
      document.getElementById("radio1")
    }

    total1 = radio1 * quant1;
    document.getElementById("total1").value = total1;
    totalbill += total1;
    document.getElementById("totalbill").value = totalbill;
  }

function Clickme2() {
  var quant2 = parseInt(document.getElementById("quantity2").value);
  var total2 = 0;
  var radio2 = 1;
  if (document.getElementById("small2").checked) {
    radio2 = 90;
    document.getElementById("radio2")
  } else if (document.getElementById("medium2").checked) {
    radio2 = 100;
    document.getElementById("radio2")
  } else if (document.getElementById("large2").checked) {
    radio2 = 150;
    document.getElementById("radio2")
  }

  total2 = radio2 * quant2;
  document.getElementById("total2").value = total2;
  totalbill += total2;
  document.getElementById("totalbill").value = totalbill;
}

function Clickme3() {
  var quant3 = parseInt(document.getElementById("quantity3").value);
  var total3 = 0;
  var radio3 = 1;
  if (document.getElementById("small3").checked) {
    radio3 = 80;
    document.getElementById("radio3")
  } else if (document.getElementById("medium3").checked) {
    radio3 = 85;
    document.getElementById("radio3")
  } else if (document.getElementById("large3").checked) {
    radio3 = 90;
    document.getElementById("radio3")
  }

  total3 = radio3 * quant3;
  document.getElementById("total3").value = total3;
  totalbill += total3;
  document.getElementById("totalbill").value = totalbill;
}

function Clickme4() {
  var quant4 = parseInt(document.getElementById("quantity4").value);
  var total4 = 0;
  var radio4 = 1;
  if (document.getElementById("small4").checked) {
    radio4 = 300;
    document.getElementById("radio4")
  } else if (document.getElementById("medium4").checked) {
    radio4 = 350;
    document.getElementById("radio4")
  } else if (document.getElementById("large4").checked) {
    radio4 = 380;
    document.getElementById("radio4")
  }

  total4 = radio4 * quant4;
  document.getElementById("total4").value = total4;
  totalbill += total4;
  document.getElementById("totalbill").value = totalbill;
}


function Clickme5() {
  var quant5 = parseInt(document.getElementById("quantity5").value);
  var total5 = 0;
  var radio1 = 5;
  if (document.getElementById("small5").checked) {
    radio5 = 400;
    document.getElementById("radio5")
  } else if (document.getElementById("medium5").checked) {
    radio5 = 450;
    document.getElementById("radio5")
  } else if (document.getElementById("large5").checked) {
    radio5 = 500;
    document.getElementById("radio5")
  }
  total5 = radio5 * quant5;
  document.getElementById("total5").value = total5;
  totalbill += total5;
  document.getElementById("totalbill").value = totalbill;;
}

Answer 2

将此功能添加到您的javascript代码中：

function calc_total_bill() {
    var totBill=0;
    //if you add other item change 5 by 6 and so on...
    for (var i = 1; i <= 5; i++) {
        if(document.getElementById("total"+i).value != "")
            totBill=totBill+parseInt(document.getElementById("total"+i).value);
    }
    document.getElementById("totalbill").value = totBill;
}

你改变了每个ClickmeX（）javascript函数，如下所示：

function Clickme5(){
    var quant5 = parseInt(document.getElementById("quantity5").value);
    var total5 = "";
    var totalbill = "";

    if(document.getElementById("small5").checked){
        radio5 = 400;
        document.getElementById("radio5")
    }
    else if(document.getElementById("medium5").checked){
        radio5 = 450;
        document.getElementById("radio5")
    }
    else if(document.getElementById("large5").checked){
        radio5 = 500;
        document.getElementById("radio5")
    }
    total5 = radio5 * quant5;
    document.getElementById("total5").value = total5;
    totalbill = totalbill + total5;
    //document.getElementById("totalbill").value = totalbill;
    calc_total_bill();
}

如何在这个JavaScript代码中获得总账单？

2 个答案: