如何在加载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);
});