Javascript update price select onchange

Pracuję nad prostym systemem rezerwacji samochodów dla pierwszego roku projektu, który jest między innymi wprowadzeniem do javascript.Javascript update price select onchange

Na pierwszej stronie wartości wprowadzone przez użytkownika są przekazywane do strony 2 za pomocą php, a mój javascript poniżej działa poprawnie w celu obliczenia ceny najmu.

mój problem

Jednak na stronie 2 użytkownik może zmieniać swoją rezerwację, tj modernizacji typ samochodu. Co powinno skutkować wzrostem lub zmniejszeniem ceny w zależności od wybranego przez użytkownika carGroup.

Mój problem podczas dodawania elementu onchange do select dla carGroup cena nie zmienia się i nie otrzymuję żadnych błędów, które nie ułatwiają debugowania sytuacji.

Poniższy kod jest dość prosty, byłbym bardzo wdzięczny, gdyby ktoś mógł go przesłać i być może doradzić, gdzie się nie udam.

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, jedyny problem z moim JSFIDDLE jest to, że funkcja calcPrice() powinien działać na <body onload="calcPrice()"> który podejrzewam nie dzieje się w JSFIDDLE

Źródło

2016-08-18 Marilee

Hej Marilee który był mi w ryba z wami! lol! Może to wymagać pewnych ulepszeń, ale jednym ze sposobów jest użycie detektorów zdarzeń. Wstawiając to w stan onload, uruchomi tę funkcję, gdy użytkownik trafi na stronę - renderując domyślne dni i wartości oraz cenę.

Słuchacz zdarzeń keyup może nie być dokładnie tym, czego potrzebujesz, ponieważ cena będzie aktualizować NA ŻYWO, gdy użytkownik dostosowuje daty i może tego nie chcieć (wystarczy, że przejdziesz google lub sprawdzisz dokumenty, aby sprawdzić, czy jest jakieś wydarzenie bardziej dopasowane do twoich potrzeb - inną opcją byłoby dodanie przycisku, który uruchamia funkcję, która ma zostać zaktualizowana po zakończeniu regulacji przez użytkownika), a lista zdarzeń change wywoła tę funkcję za każdym razem, gdy zmieni się wybór rozwijanego menu.

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

Również w kodzie jesteś redeclaring z firstDate i secondDate zmienne kiedy je zresetować. Nie trzeba ich redeclare.

Innym sposobem na zrobienie tego byłoby pozostawienie kodu takim, jaki jest, a jedynie umieszczenie detektorów zdarzeń i wywołania funkcji w załadowaniu strony.

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

calcPrice() 
     }

Źródło

2016-08-18 03:48:43 HolyMoly

HolyMoly Dziękuję bardzo – Marilee

moja przyjemność! szczęśliwe kodowanie! – 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>

Źródło

2016-08-18 04:03:44 fuzz

jak to jest inaczej niż rozwiązanie, które zamieściłem wcześniej niż 15 minut? lol – HolyMoly

Javascript update price select onchange

Odpowiedz

Powiązane problemy