如何加载HTML以及在JavaScript中更改时如何获取输入

Question

我正在使用JS将数据传递给Python。首先，当加载HTML时，我想收集值，这有效，问题是当值更改时，它不会改变。

请原谅我，我是JS的新手。这是我的工作代码：

<input type="date" id="start-date" name="start-date" value="2019-10-10"/>
<label for="date">to</label>
<input type="date" id="end-date" name="end-date" value="2020-05-10"/>

<script>
  document.onreadystatechange = function () {
    var start_date = document.getElementById("start-date").value;
    var end_date = document.getElementById("end-date").value;

    $.ajax({
      url: "/dates",
      type: "GET",
      data: {
        start_date: start_date,
        end_date: end_date,
      },
    });
  };
</script>

Answer 1

document.onreadystatechange没有任何意义。

更改活动

您需要在这里委派文档的

window.addEventListener("DOMContentLoaded", function() { // only needed if the script is not after the date elements
  document.addEventListener("change",function(e) { // this can be narrowed to a closer container like a form
    const tgt = e.target;
    if (!tgt.matches("[type=date]") return; // not a date change
    let start_date = document.getElementById("start-date").value;
    let end_date = document.getElementById("end-date").value;
    $.get("/dates", {start_date, end_date },function(data) {
      console.log(data); // returned from server
    });
  });
}); 

。使用同一事件处理程序进行两个日期的替代方案

window.addEventListener("DOMContentLoaded", function() { // only needed if the script is not after the date elements
  const startDateField = document.getElementById("start-date");
  const endDateField = document.getElementById("end-date");
  const dateChange = e => { 
    let start_date = startDateField.value;
    let end_date = endDateField.value;
    $.get("/dates", {start_date, end_date },function(data) {
      console.log(data); // returned from server
    });
  };
  startDateField.addEventListener("change",dateChange);
  endDateField.addEventListener("change",dateChange);
});