jquery - Javascript memperbarui harga saat select berubah

Saya sedang mengerjakan sistem reservasi mobil sederhana untuk proyek tahun pertama, yang antara lain merupakan pengenalan ke javascript.

Di halaman satu, nilai yang dimasukkan pengguna diteruskan ke halaman 2 dengan PHP, dan JavaScript saya di bawah ini bekerja dengan benar untuk menghitung harga sewa.

Masalah Saya

Namun, di halaman 2 pengguna dapat mengubah pemesanan mereka, yaitu meningkatkan jenis mobil. Ini seharusnya menghasilkan kenaikan atau penurunan harga tergantung pada carGroup yang dipilih oleh pengguna.

Masalah saya ketika saya menambahkan onchange ke elemen select untuk carGroup adalah harganya tidak berubah dan saya tidak mendapatkan kesalahan apa pun, yang membuat situasinya semakin sulit untuk diperbaiki.

Kode di bawah ini cukup dasar, saya akan sangat menghargainya jika ada seseorang yang bisa memeriksanya dan mungkin memberi saran di mana saya salah.

Antarmuka Pengguna

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

Saya membuat JSFIDDLE di sini, satu-satunya masalah dengan JSFIDDLE saya adalah bahwa fungsi calcPrice() seharusnya dijalankan di <body onload="calcPrice()"> yang saya curigai tidak terjadi di JSFIDDLE

Jawaban #1

Hei Marilee, itu aku yang bermain biola bersamamu! haha! Jadi ini mungkin perlu sedikit penyesuaian tapi salah satu caranya adalah dengan menggunakan event listener. Dengan menaruh ini di onload, fungsinya akan dijalankan saat pengguna membuka halaman - menampilkan hari, nilai, dan harga default.

Pendengar acara keyup mungkin bukan yang Anda inginkan karena harga akan diperbarui SECARA LANGSUNG saat pengguna menyesuaikan tanggal mereka dan Anda mungkin tidak menginginkannya (cobalah googling atau periksa dokumen untuk melihat apakah ada acara yang lebih sesuai dengan kebutuhan Anda - opsi lain adalah menambahkan tombol yang menjalankan fungsi untuk memperbarui saat pengguna selesai menyesuaikan) dan pendengar acara change akan memanggil fungsi kapan pun pilihan dropdown diubah.

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

Juga, dalam kode Anda, Anda mendeklarasikan ulang variabel firstDate dan secondDate saat Anda meresetnya. Tidak perlu mendeklarasikannya ulang.

Cara lain untuk melakukannya adalah membiarkan kode Anda seperti adanya dan hanya menempatkan pendengar acara dan pemanggilan fungsi saat halaman dimuat.

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

calcPrice()
      }

Jawaban #2

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>