嵌套输入问题答案

【问题标题】：Nested Input Problems嵌套输入问题
【发布时间】：2020-04-03 12:39:21
【问题描述】：

为什么“未定义”出现在我的文本顶部

function myname() {
    document.write('Im john doe ');
}

function myage() {
    myname();
    document.write('Im 47 years old');
}
document.querySelector('.test').innerHTML=myage();

JSBin这是完整代码

【问题讨论】：

myAge() 不返回任何内容，因此隐含值将是 `undefined。

标签： javascript nested-function

【解决方案1】：

function myage(){
        myname();
        document.write('Im 47 years old')

    }
    document.querySelector('.test').innerHTML=myage()

当您调用myage() 时，它不会返回任何内容。因此，选定目标的 innerHtml 什么也得不到。

这就是它显示未定义的原因。

【讨论】：

【解决方案2】：

当浏览器处理一个 HTML 文档并遇到一个标签时，它需要在继续构建 DOM 之前执行。当您尝试访问当时不可用的 document.querySelector('.test') 时，它给出了未定义的值。查看下面的代码，在 dom 加载后，脚本在未定义的情况下执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="test"></div>
</body>
<script>
    function myname(){
        document.write('Im john doe ')
    }
    function myage(){
        myname();
        document.write('Im 47 years old')
       
    }
  document.addEventListener("DOMContentLoaded", () => {
   document.querySelector('.test').innerHTML=myage()
  });
  
  
    
</script>
</html>

【讨论】：