2016-08-18 32 views
6

Tôi đang làm việc trên một hệ thống đặt chỗ xe hơi đơn giản cho một dự án năm đầu tiên, là một trong số những người khác giới thiệu về javascript.Giá cập nhật Javascript chọn thay đổi

Trên trang một giá trị người dùng nhập được chuyển đến trang 2 bằng php và javascript của tôi bên dưới đang hoạt động chính xác để tính giá thuê.

My Vấn đề

Tuy nhiên, trên trang 2 người dùng có thể chỉnh sửa đặt phòng của họ, ví dụ: nâng cấp loại xe. Điều gì sẽ dẫn đến tăng hoặc giảm giá tùy thuộc vào người dùng đã chọn carGroup.

Vấn đề của tôi khi thêm onchange vào phần tử select cho carGroup giá không thay đổi và không nhận được lỗi nào không làm cho tình huống trở nên dễ dàng hơn để gỡ lỗi.

Đoạn mã dưới đây là khá cơ bản, tôi sẽ đánh giá cao nó, nếu ai đó có thể cho nó một quét và có lẽ tư vấn cho nơi tôi đang đi sai.

UI

enter image description here

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, vấn đề duy nhất với JSFIDDLE tôi là chức năng calcPrice() nên chạy trên <body onload="calcPrice()"> mà tôi nghi ngờ không xảy ra trong JSFIDDLE

Trả lời

4

Hey Marilee đó là tôi trong fiddle với bạn! lol! Vì vậy, điều này có thể cần một số tinh chỉnh nhưng một cách để làm điều đó là sử dụng trình xử lý sự kiện để thay thế. Bằng cách đặt điều này trong một tải trọng, nó sẽ chạy hàm khi người dùng truy cập trang - hiển thị ngày và giá trị mặc định và giá.

Trình nghe sự kiện keyup có thể không chính xác những gì bạn muốn ở mức giá sẽ cập nhật TRỰC TIẾP khi người dùng điều chỉnh ngày của họ và bạn có thể không muốn điều đó (chỉ cần google hoặc kiểm tra tài liệu để xem liệu có sự kiện không phù hợp hơn với nhu cầu của bạn - một tùy chọn khác là thêm nút chạy chức năng cập nhật khi người dùng kết thúc điều chỉnh) và change trình xử lý sự kiện sẽ gọi hàm bất cứ khi nào chọn thả xuống.

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() 
     } 

Ngoài ra, trong mã của bạn bạn đang redeclaring các biến firstDatesecondDate khi bạn đặt lại chúng. Không cần phải redeclare chúng.

Một cách khác để làm điều đó là để mã của bạn như hiện tại và chỉ đặt trình xử lý sự kiện và cuộc gọi hàm trong tải trang.

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

calcPrice() 
     } 
+0

HolyMoly cảm ơn rất nhiều – Marilee

+0

niềm vui của tôi! mã hóa hạnh phúc! – HolyMoly

3

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>

+0

khác nhau như thế nào so với giải pháp tôi đăng 15 phút trước? lol – HolyMoly

Các vấn đề liên quan