首页 > 解决方案 > 显示 If 语句的结果

问题描述

我的代码中有一个似乎无法显示的 if 语句。我不断得到未定义(输出3)。这是一个计算,以确定直到下一个生日的天数。基本上如果出生日期已经过去,它会在出生日期上增加一年并减去当前日期。如何在 JS 代码顶部的语句中显示它以及按下“计算”按钮时显示的其他语句?谢谢!

这是让我了解如何显示它的主要代码块。

if (diff.cbdiff < 0 ) {

            var date = new Date(currentBday); 
            date.setFullYear(date.getFullYear() + 1);
            document.getElementById('output3').innerHTML= ((date-date2)/(1000*60*60*24));
            console.log(output3);
        } else {
            document.getElementById('output3').innerHTML=diff.cbdiff;
             console.log(output3);
        }

这是完整的JS代码:

function calc() {
  var date1 = new Date();
  var date2 = new Date(document.getElementById("date2").value);
  var diff = dateDiff(date1, date2);
  var output = "You are " + diff.year + " year" + "s " + diff.month + " month" + "s And " + diff.day + " day" + "s Old";
  var output1 = "You are " + diff.days + " day" + "S" + "old";
  var output2 = "You are " + diff.secondsalive + " seconds" + "old";
  var output3 = "It is " + output3 + " days until your next Birthday";

  document.getElementById("output").innerHTML = output;
  document.getElementById("output1").innerHTML = output1;
  document.getElementById("output2").innerHTML = output2;
  document.getElementById("output3").innerHTML = output3;

  console.log(date1);
  console.log(date2);
}

function dateDiff(date1, date2) {
  if (date1 > date2) return dateDiff(date2, date1);
  var diff = {};
  //console.log(currentBday);

  diff.secondsalive = ((date2 - date1) / (1000)).toLocaleString({
    undefined,
    maximumFractionDigits: 1
  });
  diff.day = date2.getDate() - date1.getDate();
  diff.days = ((date2 - date1) / (1000 * 60 * 60 * 24)).toFixed(1);
  diff.year = date2.getFullYear() - date1.getFullYear();
  diff.month = date2.getMonth() - date1.getMonth();

  var currentBdYear = date2.getFullYear();
  var currentBdMonth = date1.getMonth() + 1;
  var currentBdDay = date1.getDate();
  var currentYearBD = (diff.year + date2);

  var addDate = new Date(diff.year);
  //console.log(addDate);

  var currentBday = new Date(currentBdMonth + "/" + currentBdDay + "/" + currentBdYear);
  diff.cbdiff = ((currentBday - date2) / (1000 * 60 * 60 * 24)).toFixed(0);
  console.log(diff.cbdiff);

  if (diff.cbdiff < 0) {
    var date = new Date(currentBday);
    date.setFullYear(date.getFullYear() + 1);
    document.getElementById('output3').innerHTML = ((date - date2) / (1000 * 60 * 60 * 24));
    console.log(output3);
  } else {
    document.getElementById('output3').innerHTML = diff.cbdiff;
    console.log(output3);
  }

  if (diff.day < 0) {
    diff.month--;
    var dayDiff = new Date(date2.getYear(), date2.getMonth(), 0).getDate() - date1.getDate();
    diff.day = date2.getDate();
    if (dayDiff > 0) {
      diff.day += dayDiff;
    }
  }
  if (diff.month < 0) {
    diff.month += 12;
    diff.year--;
  }

  return diff;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
  <div>
    <h1>Birthday Calculator</h1>
    <h2> Enter Birthday</h2>
    <td>BirthDate:</td>
    <input id="date2" value="10/1/74" />
    <button onclick="calc()" style="height:50px">Calculate</button>
    <br><br>
    <table class="center">
      <tr>
        <td>
          <div id="output"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="output1"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="output2"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="output3"></div>
        </td>
      </tr>
    </table>

    <p It is id="output3"></p>

    <h3></h3>
    <script type="text/javascript" src="script.js"></script>

</body>

</html>

标签: javascripthtmlif-statement

解决方案


问题是这一行:

var output3 = "It is " + output3 + " days until your next Birthday";

output3是您要声明的变量,它不包含距离您下一个生日的天数。那是在diff.cbdiff.

另一个问题是dateDiff()将修正后的差异写入output3DIV。但calc()使用diff.cbdiff. 所以dateDiff()应该把更正的差异放在diff.cbdiff而不是 DOM 中。

function calc() {
  var date1 = new Date();
  var date2 = new Date(document.getElementById("date2").value);
  var diff = dateDiff(date1, date2);
  var output = "You are " + diff.year + " year" + "s " + diff.month + " month" + "s And " + diff.day + " day" + "s Old";
  var output1 = "You are " + diff.days + " day" + "S" + "old";
  var output2 = "You are " + diff.secondsalive + " seconds" + "old";
  var output3 = "It is " + diff.cbdiff + " days until your next Birthday";

  document.getElementById("output").innerHTML = output;
  document.getElementById("output1").innerHTML = output1;
  document.getElementById("output2").innerHTML = output2;
  document.getElementById("output3").innerHTML = output3;

  console.log(date1);
  console.log(date2);
}

function dateDiff(date1, date2) {
  if (date1 > date2) return dateDiff(date2, date1);
  var diff = {};
  //console.log(currentBday);

  diff.secondsalive = ((date2 - date1) / (1000)).toLocaleString({
    undefined,
    maximumFractionDigits: 1
  });
  diff.day = date2.getDate() - date1.getDate();
  diff.days = ((date2 - date1) / (1000 * 60 * 60 * 24)).toFixed(1);
  diff.year = date2.getFullYear() - date1.getFullYear();
  diff.month = date2.getMonth() - date1.getMonth();

  var currentBdYear = date2.getFullYear();
  var currentBdMonth = date1.getMonth() + 1;
  var currentBdDay = date1.getDate();
  var currentYearBD = (diff.year + date2);

  var addDate = new Date(diff.year);
  //console.log(addDate);

  var currentBday = new Date(currentBdMonth + "/" + currentBdDay + "/" + currentBdYear);
  diff.cbdiff = ((currentBday - date2) / (1000 * 60 * 60 * 24)).toFixed(0);
  console.log(currentBday, diff.cbdiff);

  if (diff.cbdiff < 0) {
    var date = new Date(currentBday);
    date.setFullYear(date.getFullYear() + 1);
    diff.cbdiff = ((date - date2) / (1000 * 60 * 60 * 24)).toFixed(0);
    console.log(diff.cbdiff);
  }

  if (diff.day < 0) {
    diff.month--;
    var dayDiff = new Date(date2.getYear(), date2.getMonth(), 0).getDate() - date1.getDate();
    diff.day = date2.getDate();
    if (dayDiff > 0) {
      diff.day += dayDiff;
    }
  }
  if (diff.month < 0) {
    diff.month += 12;
    diff.year--;
  }

  return diff;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
  <div>
    <h1>Birthday Calculator</h1>
    <h2> Enter Birthday</h2>
    <td>BirthDate:</td>
    <input id="date2" value="10/1/74" />
    <button onclick="calc()" style="height:50px">Calculate</button>
    <br><br>
    <table class="center">
      <tr>
        <td>
          <div id="output"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="output1"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="output2"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="output3"></div>
        </td>
      </tr>
    </table>

    <p It is id="output3"></p>

    <h3></h3>
    <script type="text/javascript" src="script.js"></script>

</body>

</html>


推荐阅读