Javascript更新价格选择onchange [英] Javascript update price select onchange
问题描述
我正在开发一个简单的汽车预订系统，用于第一年的项目，其中包括对javascript的介绍。
I'm working on a simple car reservation system for a first year project, which is among others an introduction to javascript.
在第一页上，用户的价值观输入的内容将通过php传递到第2页，我的javascript正常工作以计算出租价格。
On page one the values the user entered are passed to page 2 with php, and my javascript below is working correctly to calculate the rental price.
我的问题
但是，在第2页上，用户可以编辑他们的预订， ie升级车型。根据用户选择的 carGroup ，这会导致价格上涨或下降。
However, on page 2 the user can edit their booking, i.e. upgrading car type. Which should result in either a price increase or decrease depending on the carGroup selected by user.
将 onchange 添加到选择 carGroup的元素价格没有变化，我没有得到任何错误，这使得情况更容易调试。
My problem when im adding the onchange to the select element for carGroup the price is not changing and im getting no errors which is not making the situation any easier to debug.
下面的代码是非常基本的，如果有人可以给它扫描并且可能会告诉我哪里出错，我会非常感激。
The code below is pretty basic, I would greatly appreciate it, if someone could give it a scan and perhaps advise where I'm going wrong.
用户界面
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
我在这里创建了一个JSFIDDLE ，这是我的JSFIDDLE唯一的问题是 calcPrice（）函数应该在< body onload =calcPrice（）> 上运行，我怀疑在JSFIDDLE中没有发生
I created a JSFIDDLE here, the only problem with my JSFIDDLE Is that The calcPrice() function should run on <body onload="calcPrice()"> which I suspect is not happening in JSFIDDLE
推荐答案
嘿Marilee是我的小提琴！大声笑！所以这可能需要一些调整，但一种方法是使用事件监听器。通过将其置于onload中，它将在用户点击页面时运行该功能 - 呈现默认天数和值以及价格。
Hey Marilee that was me in the fiddle with you! lol! So this may need some tweaking but one way to do it is to use event listeners instead. By putting this in an onload, it will run the function when a user hits the page - rendering the default days and values and price.
keyup 事件监听器可能不是你想要的，因为价格将以用户身份更新LIVE调整他们的日期，你可能不希望这样（只是谷歌周围或检查文档，看看是否有更适合你的需求的事件 - 另一种选择是添加一个按钮，运行该功能，以便在用户完成调整后更新）和更改 eventlistener将在下拉选择更改时随时调用该函数。
The keyup event listener may not be exactly what you want in that the price will be updating LIVE as the user adjusts their dates and you may not want that (just google around or check the docs to see if there is a event more suited to your needs - another option would be to add a button that runs the function to update when the user is finished adjusting) and the change eventlistener will call the function anytime the dropdown select is changed.
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 变量他们。无需重新声明它们。
Also, in your code you are redeclaring the firstDate and secondDate variables when you reset them. No need to redeclare them.
另一种方法是保持代码不变，只将事件监听器和函数调用放在页面加载中。
Another way to do it would be to leave your code as it is and only put the event listeners and the function call in the page load.
window.onload = function() {
document.querySelector("#firstDate").addEventListener("keyup", calcPrice);
document.querySelector("#secondDate").addEventListener("keyup", calcPrice);
document.querySelector("#group").addEventListener("change", calcPrice);
calcPrice()
}
这篇关于Javascript更新价格选择onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
