从窗体中的 id 元素中选取日期

Question

我正在尝试使用此代码从ID中选择一个日期。实际上，只有当我手动将其声明为日期时，我才能获得正确的数据，所以我想错误出在document.getElementById('fromDate'(.value中;

<input id="fromDate" type="date">
<input id="toDate" type="date">
<button type="button" onclick="loadDoc()">Invia richiesta</button>
<p id="stampain"></p>
<p id="stampafi"></p>
<p id="stampali"></p>
 <script>
    // Define the data start
    var datastart = document.getElementById('fromDate').value; // doesn't pick data
    // var datastart = '30/03/2017'; // manually
    var datastart1 = datastart.split('/').reverse().join('-');
    var ds = new Date(datastart1);
    var start_dt = ds.toISOString().substring(0,10);
    // Define the data start
    var dataend = document.getElementById('toDate').value; // doesn't pick data
    // var dataend = '30/03/2017'; // manually
    var dataend1 = dataend.split('/').reverse().join('-');
    var de = new Date(dataend1);
    var end_dt = de.toISOString().substring(0,10);
    var CALENDAR_ID = 'my-id';
    var TOKEN = 'my-token';

    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById('print').innerHTML = this.responseText;
        }
      };
          xhttp.open('GET', 'https://api.teamup.com/'+CALENDAR_ID+'/events?_teamup_token='+TOKEN+'&startDate='+start_dt+'&endDate='+end_dt, true);
      xhttp.send();

    var e = document.getElementById('stampain').innerHTML = start_dt;
    var f = document.getElementById('stampafi').innerHTML = end_dt;

    }
    </script>

但是输出是不确定的，当然我错过了一些东西！有什么解决办法吗？

Answer 1

在 loadDoc() 函数内应用变量声明。如果声明为全局 .它在文档加载时的负载。当值未 set.so 时，单击按钮后未定义。

function loadDoc() {
// Define the data start
var datastart = document.getElementById('fromDate').value; // doesn't pick data
console.log(datastart)
// var datastart = '30/03/2017'; // manually
var datastart1 = datastart.split('/').reverse().join('-');
var ds = new Date(datastart1);
var start_dt = ds.toISOString().substring(0, 10);
// Define the data start
var dataend = document.getElementById('toDate').value; // doesn't pick data
// var dataend = '30/03/2017'; // manually
var dataend1 = dataend.split('/').reverse().join('-');
var de = new Date(dataend1);
var end_dt = de.toISOString().substring(0, 10);
var CALENDAR_ID = 'my-id';
var TOKEN = 'my-token';
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('print').innerHTML = this.responseText;
    }
  };
  xhttp.open('GET', 'https://api.teamup.com/' + CALENDAR_ID + '/events?_teamup_token=' + TOKEN + '&startDate=' + start_dt + '&endDate=' + end_dt, true);
  xhttp.send();
  var e = document.getElementById('stampain').innerHTML = start_dt;
  var f = document.getElementById('stampafi').innerHTML = end_dt;
}

<input id="fromDate" type="date">
<input id="toDate" type="date">
<button type="button" onclick="loadDoc()">Invia richiesta</button>
<p id="stampain"></p>
<p id="stampafi"></p>
<p id="stampali"></p>