जावास्क्रिप्ट अद्यतन मूल्य का चयन करें

मैं पहली वर्ष परियोजना के लिए एक साधारण कार आरक्षण प्रणाली पर काम कर रहा हूं, जो दूसरों के बीच जावास्क्रिप्ट का परिचय है।जावास्क्रिप्ट अद्यतन मूल्य का चयन करें

पृष्ठ पर उपयोगकर्ता द्वारा दर्ज किए गए मान php के साथ पृष्ठ 2 पर पास किए जाते हैं, और नीचे मेरी जावास्क्रिप्ट किराये की कीमत की गणना करने के लिए सही तरीके से काम कर रही है।

मेरे समस्या

हालांकि, पृष्ठ 2 पर उपयोगकर्ता अपने बुकिंग, अर्थात कार प्रकार उन्नयन संपादित कर सकते हैं। उपयोगकर्ता द्वारा चुने गए carGroup के आधार पर या तो कीमत में वृद्धि या कमी का परिणाम होना चाहिए।

मेरे समस्या है जब im carGroup के लिए onchange को select तत्व जोड़ कीमत नहीं बदल रहा है और im कोई त्रुटि जो स्थिति डिबग के लिए किसी भी आसान बना नहीं है हो रही है।

नीचे दिया गया कोड बहुत बुनियादी है, अगर कोई इसे स्कैन दे सकता है और शायद यह सलाह दे कि मैं गलत कहां जा रहा हूं तो मैं इसकी सराहना करता हूं।

यूआई

जावास्क्रिप्ट

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>'; 
}

एचटीएमएल

  <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() समारोह जो मुझे लगता है JSFIDDLE

में नहीं हो रहा है

स्रोत

2016-08-18 Marilee

अरे Marilee है कि आप के साथ बेला में मैं था <body onload="calcPrice()"> पर चलाना चाहिए है! जबरदस्त हंसी! तो इसके लिए कुछ tweaking की आवश्यकता हो सकती है लेकिन ऐसा करने का एक तरीका है बजाय ईवेंट श्रोताओं का उपयोग करना। इसे एक ऑनलोड में डालकर, जब कोई उपयोगकर्ता पृष्ठ को हिट करता है तो यह फ़ंक्शन चलाएगा - डिफ़ॉल्ट दिन और मान और मूल्य प्रस्तुत करना।

keyup घटना श्रोता वास्तव में क्या आप चाहते है कि मूल्य LIVE अपडेट करने वाले हैं उपयोगकर्ता के रूप में अपने दिनांकों समायोजित कर देता है और आपको लगता है कि नहीं चाहते हो सकता है (बस के आसपास गूगल या डॉक्स जाँच अगर वहाँ एक घटना है को देखने के लिए नहीं हो सकता है आपकी ज़रूरतों के लिए अधिक अनुकूल - एक और विकल्प एक बटन जोड़ना होगा जो उपयोगकर्ता को समायोजित करने पर अपडेट करने के लिए फ़ंक्शन चलाता है) और change ईवेंटलिस्टर किसी भी समय ड्रॉपडाउन चयन बदल जाता है, फ़ंक्शन को कॉल करेगा।

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 चर redeclaring कर रहे हैं जब आप उन्हें रीसेट। उन्हें फिर से चलाने की जरूरत नहीं है।

ऐसा करने का एक और तरीका यह है कि आप अपना कोड छोड़ दें और पेज लोड में केवल ईवेंट श्रोताओं और फ़ंक्शन कॉल को रखें।

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

यह 15mins पहले पोस्ट किए गए समाधान से अलग कैसे है? जबरदस्त हंसी – HolyMoly

जावास्क्रिप्ट अद्यतन मूल्य का चयन करें

उत्तर

संबंधित मुद्दे