javascript - 如何将函数返回插入innerHTML

标签 javascript html

我正在尝试使用 JS 根据当前日期自动计算一个人的年龄,然后使用内部 HTML 将该结果插入到一个范围中,但我不断得到 NAN 作为结果。知道为什么吗?

我尝试将 var x 代码放在不同的位置,还尝试插入 getAge作为innerHTML但这只是插入整个 JS。

var x = getAge();
document.getElementById("age-result").innerHTML = x;

function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

console.log('age: ' + getAge("1969/01/05"));
<span id="age-result"></span>

我做错了什么?

console.log显示正确的结果。

最佳答案

var x = getAge("1969/01/05");
document.getElementById("age-result").innerHTML = x;

function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }

    return age;

}
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <span id="age-result"></span>
</body>
</html>

您忘记将参数传递给 getAge 函数。

试试这个:

var x = getAge("1969/01/05");
document.getElementById("age-result").innerHTML = x;

function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }

  return age;

}
<span id="age-result"></span>

关于javascript - 如何将函数返回插入innerHTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54595223/

相关文章:

html - 隐藏图像直到悬停

javascript - AngularJS 和 Typescript 的 Promise

javascript - 如何在 WebRTC 通话期间锁定视频大小?

html - 页面周围出现异常 "border"

html - 网络套接字入门

javascript - 增强当前Javascript的显示和隐藏功能

javascript - jquery 如何在动画后改变光标?

php - 如何调用从 PHP 传递变量的 Javascript

javascript - 是否可以使用 WebRTC getusermedia 和 HTML5 访问整个屏幕?

android - Firefox for Android native 应用程序图标(地址栏)