选中复选框时,它会计算价格,但不会出现确认的问题

时间:2017-04-24 18:30:34

标签: javascript html



function fuelPrice()
{
    var fuelPrice=0;
    var theForm = document.forms["price"];
    var withFuelPrice = document.getElementsByClassName("ful");
    if(withFuelPrice.checked==true)
    {
        fuelPrice=30;
    }
    return fuelPrice;
}

function withPol()
{
    var polishPrice=0;
    var theForm = document.forms["price"];
    var includeInscription = document.getElementsByClassName("pol");
    if(includeInscription.checked==true){
        polishPrice=50;
    }
    return polishPrice;
}

function driver()
{
    var driverPrice=0;
    var theForm = document.forms["price"];
    var getDriv = document.getElementsByClassName("drv");
    if(getDriv.checked==true){
        driverPrice=50;
    }
    return driverPrice;
}

function calculateTotal()
{
var car1= 50
    var total = fuelPrice() + withPol() + car1 + driver();
     var text = "Total Price For the Renting "+total+ "BHD/Week";
    //display the result
    var divobj = document.getElementsByClassName('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = text;
  
    return text;

}

function myFunction()
{
	var name = calculateTotal()
	confirm(name)
}

<form class="price"><p class="totalPrice booktxt">Total Price For the Renting 50BHD/Week<br> </p>
                <input onclick="calculateTotal() " type="checkbox" class="ful">With Fuel<br>
                <input onclick="calculateTotal() " type="checkbox" class="pol">Polishing 2 weeks<br>
                <input onclick="calculateTotal() " type="checkbox" class="drv">Driver<br>

                </form>
                <button class="btn1" onclick="myFunction()">Add to cart</button>
&#13;
&#13;
&#13;

我有一些问题要让价格出现在确认中,以便用户看到价格并在我点击它时显示空白弹出窗口确认其确定。另外,我可以在将来知道我的错误以避免它吗

2 个答案:

答案 0 :(得分:2)

您必须在该确认框中返回要显示的内容。

function fuelPrice() {
  var fuelPrice = 0;
  var theForm = document.forms["price"];
  var withFuelPrice = theForm.elements["ful"];
  if (withFuelPrice.checked == true) {
    fuelPrice = 30;
  }
  return fuelPrice;
}

function withPol() {
  var polishPrice = 0;
  var theForm = document.forms["price"];
  var includeInscription = theForm.elements["pol"];
  if (includeInscription.checked == true) {
    polishPrice = 50;
  }
  return polishPrice;
}

function driver() {
  var driverPrice = 0;
  var theForm = document.forms["price"];
  var getDriv = theForm.elements["drv"];
  if (getDriv.checked == true) {
    driverPrice = 50;
  }
  return driverPrice;
}

function calculateTotal() {
  var car1 = 50
  var total = fuelPrice() + withPol() + car1 + driver();
  var text = "Total Price For the Renting " + total + "BHD/Week"; // Store text in local variable

  //display the result
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = text;

  return text; // Return text
}

function myFunction() {
  var name = calculateTotal()
  confirm(name) // Now it shows text from calculateTotal function
}
<form id="price">
  <p id="totalPrice" class="booktxt">Total Price For the Renting 50BHD/Week<br> </p>
  <input onclick="calculateTotal() " type="checkbox" id="ful">With Fuel<br>
  <input onclick="calculateTotal() " type="checkbox" id="pol">Polishing 2 weeks<br>
  <input onclick="calculateTotal() " type="checkbox" id="drv">Driver<br>
</form>
<button class="btn1" onclick="myFunction()">Add to cart</button>

答案 1 :(得分:0)

  • 只需向calculateTotal函数添加一个返回值即可。如下所示

    return divobj.innerHTML;
    
  • 完整功能如下所示:

    function calculateTotal()
    {
        var car1= 50
        var total = fuelPrice() + withPol() + car1 + driver();
    
        //display the result
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='block';
        divobj.innerHTML = "Total Price For the Renting "+total+ "BHD/Week";
        return divobj.innerHTML;
    }