我正在尝试创建一个灵活的比萨订单表单网站。但是我在将数量与价格联系起来时遇到了麻烦。例如，如果某人想订购多个比萨饼，那么我希望价格乘以其数量即可。
UPDATE 因为没有足够的显示，我被告知将全部代码放在这里
const awsmobile = {
'aws_auth_facebook': 'enable',
'aws_cognito_identity_pool_id': 'ap-northeast-1:4e86b831-da7f-47d5-8382-
3d800cd28a25',
'aws_cognito_region': 'ap-northeast-1',
'aws_facebook_app_id': 'xxxxxxxxxxxxxxxxx',
'aws_facebook_app_permissions': 'public_profile',
'aws_google_app_permissions': 'email,profile,openid',
'aws_google_web_app_id': 'xxxxxxxxxxx-
xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
'aws_project_id': 'xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxx',
'aws_project_name': 'react-native-amplify-cognito-example-xxxxxxxxxx',
'aws_project_region': 'us-west-1',
'aws_resource_name_prefix': 'reactnativeamplifyco-mobilehub-xxxxxxxx',
'aws_sign_in_enabled': 'enable',
}
export default awsmobile;
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="./javascript/pizza.js"></script>
<script>
var address = window.prompt("Enter Your Address")
window.alert("The address you entered is: " + address)
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
function getReceipt() {
var text1 = "<h3>You ordered: </h3>";
var runningTotal = 0;
var sizeTotal = 0;
var sizeArray = document.getElementsByClassName("size");
for (var i = 0; i < sizeArray.length; i++) {
if (sizeArray[i].checked) {
var selectedSize = sizeArray[i].value;
text1 = text1+selectedSize+"<br>";
}
}
if (selectedSize === "Personal Pizza") {
sizeTotal = 6;
}
else if (selectedSize === "Medium Pizza") {
sizeTotal = 10;
}
else if (selectedSize === "Large Pizza") {
sizeTotal = 14;
}
else if (selectedSize === "Extra Large Pizza") {
sizeTotal = 16;
}
runningTotal = sizeTotal;
console.log("START of SIZE");
console.log(selectedSize+" = $" + sizeTotal + ".00");
console.log("size text1: " + text1);
console.log("subtotal: $" + runningTotal + ".00");
console.log("END of SIZE");
getMeat(runningTotal,text1);
};
function getMeat(runningTotal,text1) {
var meatTotal = 0;
var selectedMeat = [];
var meatArray = document.getElementsByClassName("meat");
console.log("START of MEAT");
for (var j = 0; j <meatArray.length; j++) {
if (meatArray[j].checked) {
selectedMeat.push(meatArray[j].value);
console.log("selected meat item: " + meatArray[j].value + "");
text1 = text1+meatArray[j].value+"<br>";
}
}
var meatCount = selectedMeat.length;
if (meatCount > 1) {
meatTotal = (meatCount -1);
}
else {
meatTotal = 0
}
runningTotal = (runningTotal + meatTotal);
console.log("total selected meat items: " + meatCount);
console.log(meatCount + " meat - 1 free meat = " + "$" + meatTotal + ".00");
console.log("meat text1: " + text1);
console.log("Purchase Total: " + "$" + runningTotal + ".00");
console.log("END of MEAT");
getVeg(runningTotal,text1);
};
function getVeg(runningTotal,text1) {
var vegTotal = 0;
var selectedVeg = [];
var vegArray = document.getElementsByClassName("veggies");
console.log("START of VEG");
for (var k = 0; k <vegArray.length; k++) {
if (vegArray[k].checked) {
selectedVeg.push(vegArray[k].value);
console.log("selected veg items: " + vegArray[k].value +"");
text1 = text1+vegArray[k].value+"<br>";
}
}
var vegCount = selectedVeg.length;
if (vegCount > 1) {
vegTotal = (vegCount -1);
}
else {
vegTotal = 0
}
runningTotal = (runningTotal + vegTotal);
console.log("total selected veg items: " + vegCount);
console.log(vegCount + " veg - 1 free veg = " + "$" + vegTotal + "0.00");
console.log("veg text1: " + text1);
console.log("Purchase Total: " + "$" + runningTotal + ".00");
console.log("END of VEG");
getCheese(runningTotal,text1);
}
function getCheese(runningTotal,text1) {
var cheeseTotal = 0;
var selectedCheese = [];
var cheeseArray = document.getElementsByClassName("cheeses");
for (var l = 0; l <cheeseArray.length; l++) {
if (cheeseArray[l].checked) {
var selectedCheese = cheeseArray[l].value;
console.log("START of CHEESE");
console.log("selected cheese items: " + cheeseArray[l].value + "");
text1 = text1+cheeseArray[l].value+"<br>";
}
}
var cheeseCount = selectedCheese.length;
if (selectedCheese === "Mozzarella Cheese") {
cheeseTotal = 0;
}
else if (selectedCheese === "Extra Mozzarella") {
cheeseTotal = 3;
}
runningTotal = (runningTotal + cheeseTotal);
console.log("cheese value: " + cheeseTotal);
console.log("cheese text1: " + text1);
console.log("Purchase Total: " + "$" + runningTotal + ".00");
console.log("END of CHEESE");
getSauce(runningTotal,text1);
}
function getSauce(runningTotal,text1) {
var sauceArray = document.getElementsByClassName("sauces");
console.log("START of SAUCE")
for (var l = 0; l <sauceArray.length; l++) {
if (sauceArray[l].checked) {
var selectedSauce = sauceArray[l].value;
}
}
text1 = text1+selectedSauce+"<br>";
console.log("Selected Sauce: " + selectedSauce);
console.log("sauce text1: " + text1);
console.log("Purchase Total: " + "$" + runningTotal + ".00");
console.log("END of SAUCE");
getCrust(runningTotal,text1);
}
function getCrust(runningTotal,text1) {
var crustTotal = 0;
var selectedCrust = [];
var crustArray = document.getElementsByClassName("crusts");
for (var m = 0; m <crustArray.length; m++) {
if (crustArray[m].checked) {
var selectedCrust = crustArray[m].value;
console.log("START of CRUST");
console.log("selected crust items: " + crustArray[m].value + "");
text1 = text1+crustArray[m].value+"<br>";
}
}
var crustCount = selectedCrust.length;
if (selectedCrust === "Cheese Stuffed Crust") {
crustTotal = 3;
}
else {
cheeseTotal = 0;
}
runningTotal = (runningTotal + crustTotal);
console.log("crust value: " + crustTotal);
console.log("crust text1: " + text1);
console.log("Purchase Total: " + "$" + runningTotal + ".00");
console.log("END of CRUST");
document.getElementById("disappearing-text").innerHTML = "";
document.getElementById("showText1").innerHTML = "<strong>She's a beauty, if I do say so myself.</strong>";
document.getElementById("showText2").innerHTML = text1;
function calculate(){
runningTotal = parseFloat(document.getElementById("runningTotal").innerHTML)
var totalprice = runningTotal * quantity.value
document.getElementById("totalprice").innerHTML = "<h3>Total: <strong>$"+ totalprice + ".00" + "</strong></h3>";
}
}
function clearAll() {
document.getElementById("disappearing-text").innerHTML = "<h4>Oops! Try building a pizza first.</h4>";
document.getElementById("frmMenu").reset();
document.getElementById("showText1").innerHTML = "";
document.getElementById("showText2").innerHTML = "";
document.getElementById("totalPrice").innerHTML = "";
};
</script>
当我这样做时，我会得到NaN，但我想要的是乘以价格
答案 0 :(得分：0)
首先，您应该有一个标签来显示产品价格（从服务器中的模型层获取数据并将其放置在标签上） 和一个数字输入以获取用户的产品数量+总价格标签
之后，您在数字输入上设置了一个onchange侦听器 在您的事件处理程序中，您可以根据产品价格上的多个产品数量来计算总价格
注意：JavaScript中的NaN是对没有数值的数字进行运算的结果 innerHTML不会将数字返回给您，因此您已将其转换为数字，方法是使用 编号（document.getElementById（“ test”）。innerHTML）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body style="margin: 10px">
<div id="product12">
<label for="product12-price">item price :</label>
<span id="product12-price" product-id="12">5</span>
<span id="product12-price-unit">$</span>
<div id="product12-quantity-container" style="margin-top: 10px;">
<input type="number" id="product12-quantity" min="0" max="10">
</div>
</div>
<div id="total-price-container" style="margin-top: 10px;">
<span id="total-price-caption">total price :</span>
<span id="total-price">0</span>
<span id="total-price-unit">$</span>
</div>
<script>
var product12_quantity = document.getElementById("product12-quantity");
var total_price = document.getElementById("total-price");
product12_quantity.addEventListener("change", function () {
total_price.innerHTML = Number(document.getElementById("product12-price").innerHTML) * Number(product12_quantity.value);
});
</script>
</body>
</html>
答案 1 :(得分：0)
您的代码中似乎缺少一些链接，我尝试使用以下代码填充这些链接。TRy使用下面的代码，看看您是否能够计算成本。 如果仍然遇到问题，请在此处发布您的完整代码。
var runningTotal = 0;
console.log("Purchase Total: " + "$" + runningTotal + ".00");
console.log("END of CRUST");
function calculate() {
var sizeTotal = 0;
runningTotal = parseFloat(document.getElementById("perPizzaCost").innerHTML)
totalprice = runningTotal * quantity.value;
document.getElementById("totalPrice").innerHTML = "<h3>Total: <strong>$" + totalprice + ".00" + "</strong></h3>";
}<label for="quantity">Quantity:</label>
<input type="number" class="form-control" id="quantity" placeholder="Please enter quantity" name="quantity" value="1" onChange="calculate()">
<div> Per Pizza Cost : <span id="perPizzaCost">200</span>$ </div>
<div id="totalPrice"></div>