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

回答

相關問題