Question

我正在开发一个简单的汽车预订系统，用于第一年的项目，其中包括对javascript的介绍。

在第一页上，用户输入的值将通过php传递到第2页，我的javascript正常工作以计算租赁价格。

我的问题

但是，在第2页上，用户可以编辑他们的预订，即。升级汽车类型。根据用户选择的carGroup，这会导致价格上涨或下降。

我将问题onchange添加到select元素carGroup时价格没有变化，而且我没有收到任何错误，这使得情况更容易调试。

以下代码非常基本，如果有人可以进行扫描并且可能会告诉我哪里出错，我会非常感激。

UI

的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，我的JSFIDDLE的唯一问题是calcPrice()函数应该在<body onload="calcPrice()">运行，我怀疑在JSFIDDLE中没有发生

Answer 1

嘿Marilee就是我的小提琴！大声笑！所以这可能需要一些调整，但一种方法是使用事件监听器。通过将其置于onload中，它将在用户点击页面时运行该功能 - 呈现默认天数和值以及价格。

keyup事件监听器可能不完全是您想要的，因为价格将会更新LIVE，因为用户调整了他们的日期，而您可能不希望这样（只是谷歌周围或检查文档，看看是否有是一个更适合您需求的事件 - 另一个选项是添加一个按钮，运行该函数以在用户完成调整时进行更新）并且change eventlistener将在下拉选择更改时随时调用该函数。

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变量。无需重新声明它们。

另一种方法是保持代码不变，只将事件监听器和函数调用放在页面加载中。

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

calcPrice()
      }

Answer 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>

Javascript更新价格选择onchange

2 个答案: