Javascript Update Preis wählen onchange

Ich arbeite an einem einfachen Auto Reservierungssystem für ein erstes Jahr Projekt, das unter anderem eine Einführung in Javascript ist.Javascript Update Preis wählen onchange

Auf Seite eins werden die Werte, die der Benutzer eingegeben hat, auf Seite 2 mit PHP übergeben, und mein untenstehendes Javascript funktioniert korrekt, um den Mietpreis zu berechnen.

Mein Problem

jedoch auf Seite 2 der Benutzer können ihre Buchung bearbeiten, das heißt Fahrzeugtyp Upgrade. Dies sollte entweder zu einer Preiserhöhung oder -minderung führen, abhängig von dem vom Benutzer ausgewählten carGroup.

Mein Problem, wenn im das onchange, um das select Element für carGroup der Preis nicht addiert das Ändern und im keinen Fehler bekommen, die nicht ist einfacher zu debuggen, die Situation zu machen.

Der Code unten ist ziemlich einfach, ich würde es sehr schätzen, wenn jemand könnte es einen Scan geben und vielleicht beraten, wo ich falsch liege.

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, ist das einzige Problem mit meinem JSFIDDLE dass die calcPrice() Funktion auf <body onload="calcPrice()"> laufen soll, die ich vermute, geschieht nicht in JSFIDDLE

Quelle

2016-08-18 Marilee

Hey Marilee, die mich in der Geige mit Ihnen war! lol! Dies erfordert möglicherweise einige Feinabstimmungen, aber eine Möglichkeit besteht darin, stattdessen Ereignis-Listener zu verwenden. Wenn Sie dies auf ein Onload setzen, wird die Funktion ausgeführt, wenn ein Benutzer die Seite aufruft - und die Standardtage und -werte sowie den Preis rendern.

Die keyup Event-Listener möglicherweise nicht genau das, was Sie wollen, in dem der Preis wird LIVE aktualisieren, wie der Benutzer ihre Daten passt und Sie möchten möglicherweise nicht (google herum oder überprüfen Sie die Dokumente, um festzustellen, ob ein Ereignis vorliegt) besser geeignet für Ihre Bedürfnisse - eine weitere Option wäre das Hinzufügen einer Schaltfläche, die die Funktion zum Aktualisieren ausführt, wenn der Benutzer die Anpassung beendet hat, und der Event-Listener ruft die Funktion immer dann auf, wenn die Dropdown-Auswahl geändert wird.

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

Auch in Ihrem Code Sie erneut deklariert die firstDate und secondDate Variablen, wenn Sie sie zurücksetzen. Keine Notwendigkeit, sie neu zu deklarieren.

Eine andere Möglichkeit wäre, den Code so zu lassen, wie er ist, und nur die Ereignis-Listener und den Funktionsaufruf in die Seitenladung zu legen.

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

calcPrice() 
     }

Quelle

2016-08-18 03:48:43 HolyMoly

holymoly danken Ihnen sehr viel – Marilee

mein Vergnügen! fröhliche Codierung! – 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>

Quelle

2016-08-18 04:03:44 fuzz

Wie ist das anders als die Lösung, die ich 15 Minuten vorher gepostet habe? lol – HolyMoly

Javascript Update Preis wählen onchange

Antwort

Verwandte Themen