Javascript更新价格选择onchange
我正在为第一年的项目开发一个简单的汽车预订系统，其中包括对javascript的介绍。
在第一页，用户输入的值将通过php传递到第2页，我的下面的javascript正在计算出租价格。
我的问题
但是，在第2页上，用户可以编辑他们的预订， 即升级车型。 这应该导致价格上涨或下降，具体取决于用户选择的carGroup 。
我的问题是，当我将onchange添加到carGroup的select元素时，价格没有变化，我没有得到任何错误，这使得情况更容易调试。
下面的代码是非常基本的，我会非常感激，如果有人可以给它一个扫描，也许建议我哪里出错了。
UI
使用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. Total Price: ' + price + ''; }
HTML
<option selected value=""> Group A (Hyundai I10) Group B (VW POLO) Group C (Corolla) Group D (Bakkie)
嘿Marilee，这是我与你的小提琴！ 大声笑！ 所以这可能需要一些调整，但一种方法是使用事件监听器。 通过将其置于onload中，它将在用户点击页面时运行该function – 呈现默认日期和值以及价格。
keyup事件监听器可能不完全是你想要的，因为当用户调整他们的日期并且你可能不想要它时，价格将更新LIVE（只是谷歌或检查文档，看看是否有更适合你的事件需要 – 另一种选择是添加一个按钮来运行函数，以便在用户完成调整时进行更新）并且change 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. Total Price: ' + price + ''; } calcPrice() }
此外，在您的代码中， secondDate时会重新声明firstDate和secondDate变量。 无需重新声明它们。
另一种方法是保持代码不变，只将事件监听器和函数调用放在页面加载中。
window.onload = function() { document.querySelector("#firstDate").addEventListener("keyup", calcPrice); document.querySelector("#secondDate").addEventListener("keyup", calcPrice); document.querySelector("#group").addEventListener("change", calcPrice); calcPrice() }
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. Total Price: ' + price + ''; } document.getElementById("rentalInfo").innerHTML = innerHtml; } calcPrice(); };