我试图建立一个计算器，计算各种日期的基础上，用户的输入。用户选择的日期，当一个文件发出，然后需要发生两件事：
1.有效期的计算方法是在发布并显示给用户的日期上加上X天
1.建议的申请日期是根据有效期减去X天计算
第一个我得到了工作（不是在一个非常优雅的方式，但它的作品这一部分）第二部分（建议的申请日期），我不能得到工作。我做了很多研究，但不能找到一个解决方案。（我是一个初学者）
我在想，也许"onchange"不是正确的事件，但我找不到适用于这种情况的另一个事件的信息。或者是函数结构的问题？或者完全是其他的问题？我也试过moment.js和其他一些库，但我在下面的codepen中找到的是迄今为止我走得最远的。
所有的密码都在这里：https://codepen.io/locheia1985/pen/XWBMGXZ
代码如下：

function setSecondDate() {
  var days = document.getElementById('select').value;
  var date = new Date(document.getElementById('date1').value);
  date.setDate(date.getDate() + parseInt(days));
  document.getElementById('date2').valueAsDate = date;
}

function setThirdDate() {
  var days3 = document.getElementById('select2').value;
  var date2 = new Date(document.getElementById('date2').value);
  date2.setDate(date2.getDate() - parseInt(days3));
  document.getElementById('date3').valueAsDate = date3;

  console.log(date2);
}

body
 {
  font-family:sans-serif;
  background: #dde1e7;
  min-height: 100vh;
}
.center,.content
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.click-me
{
  display:block;
  width:160px;
  height:50px;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #fffdfdcc,3px 3px 5px rgba(94, 104, 121, 0.342);
  text-align:center;
  font-size:22px;
  line-height:50px;
  cursor:pointer;
}
#click
{
  display:none;
}
.click-me:hover
{
  color: #0a5878;
}
.content
{
  visibility:hidden;  
  width: 330px;
  height: auto;
  background: #dde1e7;
  padding: 30px 35px 40px;
  box-sizing: border-box;
  border-radius: 5px;
}
#temp
{
  position:absolute;
  right:10px;
  top:20px;
  font-size:25px;
  background: #dde1e7;
  padding: 3px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 50%;
  cursor:pointer;
}
#click:checked~.content
{
  opacity:1;
  visibility:visible;
}
.text
{
  font-size: 30px;
  color: #000000;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}
form
{
  margin-top: 40px;
}
label
{
  display: block;
  margin-top: 30px;
  font-size: 16px;
  font-weight: 500;
}
input
{
  display: block;
  height: 43px;
  width: 100%;
  background-color: rgba(255,255,255,0.07);
  border-radius: 3px;
  border: none;

  margin-top: 8px;

  font-size: 14px;
  font-weight: 300;
}
::placeholder
{
  color: #4b4e4d;
  padding-left: 10px;
}
button
{
  width: 100%;
  margin-top: 35px;
  padding: 12px;
  background: #dde1e7;
  border: none;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 32px;
}

<div class="center">
  <input type="checkbox" id="click">
  <label for="click" class="click-me">Passport</label>
  <div class="content">

    <label for="click" id="temp">x</label>

    <form>

      <select style="display: none" id="select">
        <option value="150">150 days</option>
      </select>

      <select style="display: none" id="select2">
        <option value="50">150 days</option>
      </select>

      <label for="date1">Date Issued:</label>
      <input type="date" onchange="setSecondDate();" id="date1">

      <label for="date2">Expiry Date:</label>
      <input type="date" onchange="setThirdDate();" id="date2">

      <label for="date3">Recommended Application Date:</label>
      <input type="date" id="date3">


    </form>
  </div>
</div>

任何帮助都将不胜感激