javascript - 显示 JavaScript 函数/值

Question

我是 JavaScript 的初学者，这个问题可能表明了这一点。

我有这个代码:

<script>
    function treatAsUTC(s) {
        var b = s.split(/\D/);
        return new Date(Date.UTC(b[2], b[1]-1, b[0]));
    }

    function daysBetween(startDate, endDate) {
        startDate = treatAsUTC(startDate);
        endDate = treatAsUTC(endDate);
        return (endDate - startDate) / 8.64e7;
    }

    function calcDiff() {
        document.querySelector('#tdays').value = 
           (daysBetween(document.querySelector('#startPicker').value,
            document.querySelector('#endPicker').value));
    }
</script>

<input type="text" id="sod" class="startd" value="10/02/2016" />d/m/y
<input type="text" id="dos" class="endd"  value="12/02/2016" />d/m/y
<br>
<button onclick="calcDiff()">Calculate difference in days</button>
<input type="text" id="tdays" readonly>Days

现在我希望结果随着日期的变化而永久显示和更新(它们将是日期选择器)而不是 onClick。

我尝试过innerHTML和document.write，但无法让它工作。

任何帮助将不胜感激。

提前致谢。

伊恩

Answer 1

基本上，您在大多数地方都使用了错误的选择器。

#sod 表示 id 为 sod 的元素。这同样适用于其他人。

添加了此 document.querySelector('#sod').addEventListener('input', calcDiff); 以在更改输入值时调用函数。

function treatAsUTC(s) {
  var b = s.split(/\D/);
  return new Date(Date.UTC(b[2], b[1] - 1, b[0]));
}

function daysBetween(startDate, endDate) {
  startDate = treatAsUTC(startDate);
  endDate = treatAsUTC(endDate);
  return (endDate - startDate) / 8.64e7;
}

function calcDiff() {
  document.querySelector('#result').value =
    (daysBetween(document.querySelector('#sod').value,
      document.querySelector('#dos').value));
}
document.querySelector('#sod').addEventListener('input', calcDiff);
document.querySelector('#dos').addEventListener('input', calcDiff);

<input type="text" id="sod" class="startd" value="10/02/2016" />d/m/y
<input type="text" id="dos" class="endd" value="12/02/2016" />d/m/y
<br>
<button onclick="calcDiff()">Calculate difference in days</button>
<input type="text" id="result" readonly>Days