Javascript更新价格选择onchange

我正在致力于第一年项目的简单汽车预订系统，其中包括对javascript的介绍。Javascript更新价格选择onchange

在第一页上，用户输入的值用php传递给页面2，下面我的javascript工作正常，可以计算出租价格。

我的问题

然而，第2页，用户可以编辑自己的预订，即升级车型。这应该导致价格上涨或下降，具体取决于用户选择的carGroup。

当我将onchange添加到select元素的carGroup价格没有变化，我没有得到任何错误，这不会让情况更容易调试。

下面的代码是非常基本的，我将不胜感激，如果有人可以给它一个扫描，也许建议我要去哪里错了。

的Javascript

function calcPrice() { 
    var oneDay = 24 * 60 * 60 * 1000; 
    var firstDate = document.getElementById("firstDate").value; 
    var secondDate = document.getElementById("secondDate").value; 
    var date1 = firstDate.substring(0, 11); 
    var date2 = secondDate.substring(0, 11); 
    date1 = date1.replace(/\//g, ","); 
    date2 = date2.replace(/\//g, ","); 

    var firstDate = new Date(date1); 
    var secondDate = new Date(date2); 

    var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 
    //calculate rental price 
    var price; 
    var dayRate; 
    var carGroup = document.getElementById("group").value; 

    //change values to increase or decrease price 
    var a = 250; 
    var b = 500; 
    var c = 750; 
    var d = 1000; 
    if (carGroup == 'a') { 
    price = diffDays * a; 
    dayRate = a; 
    } else if (carGroup == 'b') { 
    price = diffDays * b; 
    dayRate = b; 
    } else if (carGroup == 'c') { 
    price = diffDays * c; 
    dayRate = c; 
    } else if (carGroup == 'd') { 
    price = diffDays * d; 
    dayRate = d; 
    } 

    document.getElementById("rentalInfo").innerHTML = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>'; 
}

的Html

  <select onChange="calcPrice()"name="carType" id="group"> 
      <option selected value="<?php echo $carType ?>"><?php echo $carType?></option> 
      <option value="a">Group A (Hyundai I10)</option> 
      <option value="b">Group B (VW POLO)</option> 
      <option value="c">Group C (Corolla)</option> 
      <option value="d">Group D (Bakkie)</option> 
     </select> 
    </div><!--formGroup-->

的jsfiddle

I created a JSFIDDLE here，用我的jsfiddle唯一的问题是，calcPrice()功能应该<body onload="calcPrice()">运行，我怀疑是不是在的jsfiddle

发生

来源

2016-08-18 Marilee

嘿Marilee这是我在摆弄你！大声笑！所以这可能需要一些调整，但一种方法是使用事件监听器。通过加载它，它会在用户点击页面时运行该函数 - 呈现默认日期和值以及价格。

keyup事件监听器可能并不完全符合您的要求，因为用户调整日期时您的价格将会更新LIVE，您可能不想要这样做（只需在Google左右或查看文档以查看是否有事件更适合您的需求 - 另一种选择是添加一个按钮，该按钮在用户完成调整时运行该功能进行更新），并且在下拉选择更改时，eventlistener将调用该功能。

window.onload = function() { 
     document.querySelector("#firstDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#secondDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#group").addEventListener("change", calcPrice); 

     function calcPrice() { 
      var oneDay = 24 * 60 * 60 * 1000; 
      var firstDate = document.getElementById("firstDate").value; 
      var secondDate = document.getElementById("secondDate").value; 
      var date1 = firstDate.substring(0, 11); 
      var date2 = secondDate.substring(0, 11); 
      date1 = date1.replace(/\//g, ","); 
      date2 = date2.replace(/\//g, ","); 

      firstDate = new Date(date1); 
      secondDate = new Date(date2); 

      var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 
      //calculate rental price 
      var price; 
      var dayRate; 
      var carGroup = document.getElementById("group").value; 

      //change const values to increase or decrease price 
      var a = 250; 
      var b = 500; 
      var c = 750; 
      var d = 1000; 
      if (carGroup == 'a') { 
      price = diffDays * a; 
      dayRate = a; 
      } else if (carGroup == 'b') { 
      price = diffDays * b; 
      dayRate = b; 
      } else if (carGroup == 'c') { 
      price = diffDays * c; 
      dayRate = c; 
      } else if (carGroup == 'd') { 
      price = diffDays * d; 
      dayRate = d; 
      } 

      document.getElementById("rentalInfo").innerHTML = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>'; 
     } 



     calcPrice() 
     }

而且，在你的代码你，当你重新设置重新声明的firstDate和secondDate变量。无需重新声明它们。

这样做的另一种方法是让您的代码保持原样，并且只将事件侦听器和函数调用放入页面加载中。

window.onload = function() { 
     document.querySelector("#firstDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#secondDate").addEventListener("keyup", calcPrice); 
     document.querySelector("#group").addEventListener("change", calcPrice); 

calcPrice() 
     }

来源

2016-08-18 03:48:43 HolyMoly

HolyMoly非常感谢你 – Marilee

我的荣幸！快乐的编码！ – HolyMoly

window.onload = function() 
 
{ 
 
    document.querySelector("#firstDate").addEventListener("keyup", calcPrice); 
 
    document.querySelector("#secondDate").addEventListener("keyup", calcPrice); 
 
    document.querySelector("#group").addEventListener("change", calcPrice); 
 

 
    function calcPrice() { 
 
    var oneDay = 24 * 60 * 60 * 1000; 
 
    var firstDate = document.getElementById("firstDate").value; 
 
    var secondDate = document.getElementById("secondDate").value; 
 
    var date1 = firstDate.substring(0, 11); 
 
    var date2 = secondDate.substring(0, 11); 
 
    date1 = date1.replace(/\//g, ","); 
 
    date2 = date2.replace(/\//g, ","); 
 

 
    var firstDate = new Date(date1); 
 
    var secondDate = new Date(date2); 
 

 
    var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 
 
    //calculate rental price 
 
    var price; 
 
    var dayRate; 
 
    var carGroup = document.getElementById("group").value; 
 

 
    //change const values to increase or decrease price 
 
    var a = 250; 
 
    var b = 500; 
 
    var c = 750; 
 
    var d = 1000; 
 
    if (carGroup == 'a') { 
 
     price = diffDays * a; 
 
     dayRate = a; 
 
    } else if (carGroup == 'b') { 
 
     price = diffDays * b; 
 
     dayRate = b; 
 
    } else if (carGroup == 'c') { 
 
     price = diffDays * c; 
 
     dayRate = c; 
 
    } else if (carGroup == 'd') { 
 
     price = diffDays * d; 
 
     dayRate = d; 
 
    } 
 

 
    var innerHtml; 
 

 
    if (isNaN(diffDays)) { 
 
     innerHtml = "Invalid Date"; 
 
    } else { 
 
     innerHtml = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>'; 
 
    } 
 

 
    document.getElementById("rentalInfo").innerHTML = innerHtml; 
 
    } 
 

 
    calcPrice(); 
 
};

<input type="text" value="08/20/2016" id="firstDate" /> 
 
<input type="text" value="08/22/2016" id="secondDate" /> 
 
<select class="" name="carType" id="group"> 
 
    <option value="a" selected>Group A (Hyundai I10)</option> 
 
    <option value="b">Group B (VW POLO)</option> 
 
    <option value="c">Group C (Corolla)</option> 
 
    <option value="d">Group D (Truck)</option> 
 
</select> 
 

 
<p id="rentalInfo"></p>

来源

2016-08-18 04:03:44 fuzz

这与我15分钟前发布的解决方案有什么不同？大声笑 – HolyMoly

Javascript更新价格选择onchange

回答

相关问题